Menu icon Foundation
Collapse accordion on tablet and mobile

Hi,

I have the following code which displays a collapsed accordion on all sizes.

I would like to have the accordions collapsed on tablet and mobile views. What is the best way to do this?

Thanks!

<ul class="accordion " data-accordion>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel1a">Heading 1</a>
    <div id="panel1a" class="content active">
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>         
    </div>
  </li>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel2a">Heading 2</a>
    <div id="panel2a" class="content active hide-for-small ">
     <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel3a">Heading 3</a>
    <div id="panel3a" class="content active">
<a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
  
   <li class="accordion-navigation large-3 columns">
    <a href="#panel4a">Heading 4</a>
    <div id="panel4a" class="content active">
     <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
</ul>


<script>
  $(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
    
});
</script>

         

accordiancollapsed on tablet and mobile

Hi,

I have the following code which displays a collapsed accordion on all sizes.

I would like to have the accordions collapsed on tablet and mobile views. What is the best way to do this?

Thanks!

<ul class="accordion " data-accordion>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel1a">Heading 1</a>
    <div id="panel1a" class="content active">
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>         
    </div>
  </li>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel2a">Heading 2</a>
    <div id="panel2a" class="content active hide-for-small ">
     <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
  <li class="accordion-navigation large-3 columns">
    <a href="#panel3a">Heading 3</a>
    <div id="panel3a" class="content active">
<a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
  
   <li class="accordion-navigation large-3 columns">
    <a href="#panel4a">Heading 4</a>
    <div id="panel4a" class="content active">
     <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a><br>
                <a href="#">link</a>   
    </div>
  </li>
</ul>


<script>
  $(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
    
});
</script>

         
balazs sziklai about 4 years ago

Hi there!

Well by default all accordion segments are collapsed. If your approach is mobile-first that should be your default state and open them up only on medium or large (jquery resize event).

You can toggle the active classes with jquery then use:

 $(document).foundation('accordion', 'reflow');

or you can also use jquery`s trigger('click') function to fire 'fake' click events on the nav elements

Philip about 4 years ago

Thanks for the reply. I've now removed the active class from them and added the above jQuery, but they are now displaying closed on all sizes. Did I do something wrong?

Thanks