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!