Element won't slideDown() on certain width viewport

Question

I'm trying to achieve a footer similar to what https://www.gucci.com/ has, where it becomes an accordion on below 768px and becomes normal block grid on 768px and above.

My issue is that every-time after I toggle the accordion below 768px then resize it back above 768px the elements won't slideDown or show, it'll just stay folded or hidden.

below are my code

 $(document).on('click','.footer-toggle', function(e){ if ($(window).width() < 768) { if($(this).hasClass("opened")) { $(this).removeClass("opened"); $(this).next(".toggled-content").slideUp("fast"); } else { $(".footer-toggle").removeClass("opened"); $(".toggled-content").slideUp("fast"); $(this).addClass("opened"); $(this).next(".toggled-content").slideDown("fast"); } } e.preventDefault(); }); if ($(window).width() >= 768) { $('.toggle-content').slideDown("fast"); } 

 .toggle-content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="footer-toggle">TITLE 1</a> <div class="toggle-content"> <ul> <li><a href="">NAV A</a></li> <li><a href="">NAV B</a></li> <li><a href="">NAV C</a></li> <li><a href="">NAV D</a></li> </ul> </div> 

I would really appreciate the help guys, thanks.

Answer 1

Your code will work with just a couple changes. Here's what I'd suggest:

1. Clean up your references to class names in your jQuery selectors (ie where the class 'toggle-content' is referenced as 'toggled-content').

2. Remove these 2 lines just inside your else block.

    $(".footer-toggle").removeClass("opened"); $(".toggled-content").slideUp("fast"); 

These are working against you in this case, where you want the menu to slide down, but your code is first telling it to slide up.