Easy way to expand a foundation accordion

Here’s a simple way to get a zurb foundation accordion to open all its accordion’y goodness on a single button click.

So this still allows any row of an accordion to be opened or closed individually but if the ‘open all’ button is pressed, the entire accordion is either expanded or collapsed.

html

<a href="#" data-trigger="accordion">Show entire accordion</a>
<ul class="accordion">
   <li class="accordion-navigation">
      <a href="#panel1a">accordion heading</a>
      <div id="panel1a" class="content">
      <!--content-->
   </li>
   <li class="accordion-navigation">
      <a href="#panel1b">accordion heading</a>
      <div id="panel1b" class="content">
      <!--content-->
   </li>
<ul>

js

$('[data-trigger="accordion"]').on('click', function(e) {
  var obj = $(this),
  accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
  accordionPanels = $('.content', '[data-accordion]');

  if (obj.hasClass('toggle-open')) {
    accordionButtons.removeClass('active');
    accordionPanels.removeClass('active');
    obj.removeClass('toggle-open');
  } else {
    accordionButtons.addClass('active');
    accordionPanels.addClass('active');
    obj.addClass('toggle-open');
  }
  $('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
  e.preventDefault();
});

Leave a Reply