1

Lets assume this is my footer link markup:

<div class="links">
  <div id="links1-title">Links 1</div>
  <ul id="links1-content">
    <li>xyz</li>
    <li>xyz</li>
    <li>xyz</li>
  </ul>
</div>

<div class="links">
  <div id="links2-title">Links 2</div>
  <ul id="links2-content">
    <li>xyz</li>
    <li>xyz</li>
    <li>xyz</li>
  </ul>
</div>

(Basically I just added unique ids to each title div and ul in the links template.)

Here is my js code:

<script type="text/javascript">
    enquire.register('screen and (max-width: ' + (bp.medium) + 'px)', {
        match: function () {
            jQuery(document).ready(function($){
                $(".links ul").fadeOut("slow"); // Hiding the ul for small viewports
                $("#links1-title").click( function() {
                    $("#links1-content").fadeToggle("slow"); // Toggle element on click
                });
                $("#links2-title").click( function() {
                    $("#links2-content").fadeToggle("slow"); // Toggle element on click
                });
            });
        },
        unmatch: function () {
            jQuery(document).ready(function($){
                $(".links ul").fadeIn("slow"); // Show element for big viewports
            });
        }
    })
</script>

I am hiding the ul element for specific resolutions and am turning the title into a clickable element which will toggle the hidden ul.

While this is generally working, for some reason I am experiencing a strange behavior, where my hidden uls visibility will be toggled twice and the ul will therefore be hidden again. It seems this is only happening, if the enquire state has been matched, unmatched and matched again.

Can anybody explain this behavior? Or maybe there is a much easier approach to what I am trying to achieve. Thank you!

2
  • 3
    I'm voting to close this question as off-topic because it is not really a magento issue, but markup / javascrpt, and would be best placed in a forum that deals with those.
    – ProxiBlue
    Mar 26, 2015 at 12:58
  • I actually have to agree, as this turned out to be related to an enquire.js option.
    – loeffel
    Mar 26, 2015 at 13:03

1 Answer 1

1

I think I figured it out. The problem was, that I didn't use "setup" for my enquire.js code. This is my new js code and it seems to be working correctly:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(".links ul").addClass("expanded");
    });
    enquire.register('screen and (max-width: ' + (bp.medium) + 'px)', {
        setup: function () {
            jQuery(document).ready(function($){
                $("#link1-title").click( function() {
                    $("#link1-content").toggleClass("expanded");
                });
                $("#link2-title").click( function() {
                    $("#link2-content").toggleClass("expanded");
                });
            });
        },
        match: function () {
            jQuery(document).ready(function($){
                $(".links ul").removeClass("expanded");
            });
        },
        unmatch: function () {
            jQuery(document).ready(function($){
                $(".links ul").addClass("expanded");
            });
        }
    })
</script>

I also added this css:

ul {
    height: 0;
    overflow: hidden;
}

ul.expanded {
    height: auto;
}

I am sure there is a better way to achieve this, so if anybody wants to post his/her solution, I would still really appreciate it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.