Menu icon Foundation
Accordion menu open or close with media queries

Can figure out how to have a specific accordion menu opened or closed with media queries.

example 

.class closed accordion submenus for small screens

.class opened accordion submenus for medium and large screens

Any help is much appreciated!

 

accordionmedia queriesupdowncloseopenmenu

Can figure out how to have a specific accordion menu opened or closed with media queries.

example 

.class closed accordion submenus for small screens

.class opened accordion submenus for medium and large screens

Any help is much appreciated!

 

Rafi Benkual over 3 years ago

Do you have an example set up of what you tried?

Are you trying to get more vertical room on a small screen?

 

You can use jQuery to add and remove classes with a window width listener. The class that controlls if it's open or closed is .is-active

var $window = $(window),
     $ul = $('.accordion');

 $(window).on('resize', function () {
    if ($window.width() < 640) {
       $ul.addClass('is-active');
   }else{

    $ul.removeClass('is-active')};
 });

You can also use the built in media query functions in Foundation 

http://foundation.zurb.com/sites/docs/javascript-utilities.html#mediaquery

HP over 3 years ago

Thx for helping!

For whatever reason I can Not get the Js to work on a Menu accordion with submenu

heres my codepen. I must be missing something

http://codepen.io/HP007/pen/YqEvmw