How to collapse all opened accordion using ZURB Foundation 6

Question

To default open an accordion section, you need to add "is-active" class for the li tag. like this:

<li class="accordion-item is-active" data-accordion-item>
    <a href="#0" class="accordion-title"><h5>This is the title</h5></a>
    <div class="accordion-content" data-tab-content>
      <p>This is the content
      </p>
</li>

So I tried to remove "is-active" class using js so that the accordion will collapse/close. But even after "is-active" class is removed, the accordion stays open. How should I collapse/close all the accordion with a single click of a button?

Here is the documentation for Zurb Accordion

Here is the script that I used, (although I dont think its relevant)

    $(document).ready(function(){
    $(".testClass").click(function(){
        $("li").removeClass("is-active");
    });
});

Answer 1

I know is a bit late for this, but I came across to this issue today and after expending a few hours on it (kind of new on this), using Jatin's code I create a CodePen with an example. Using a Javascript function that will Expand or Collapse not matter the states of the different Accordions (If there's a mix of open/closes).

For reference see this Codepen

$(document).foundation();
$(document).ready(function() {
  $(".toggle-accordion").on("click", function() {
    var accordionId = $(this).attr("accordion-id");
    $(this).toggleClass("accordions-expanded");
    triggerAccordions = document.querySelectorAll(".accordions-expanded");
    if (triggerAccordions.length == 0) {
      collapseAll();
    } else {
      expandAll();
    }
  });
});

function collapseAll() {
  $(".accordion").each(function () {
    var $acc = $(this);
    var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
    $openSections.each(function (i, section) {
      $acc.foundation("up", $(section));
    });
  });
};

function expandAll() {
  $(".accordion").each(function () {
    var $acc = $(this);
    var $openSections = $acc.find(".accordion-item .accordion-content");
    $openSections.each(function (i, section) {
      $acc.foundation("down", $(section));
    });
  });
};

body {
  color: #6a6c6f;
  background-color: #f1f3f6;
  margin-top: 30px;
}

.container {
  max-width: 960px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.accordion-option {
  width: 100%;
  float: left;
  clear: both;
  margin: 15px 0;
}

.accordion-option .title {
  font-size: 20px;
  font-weight: bold;
  float: left;
  padding: 0;
  margin: 0;
}

.accordion-option .toggle-accordion {
  float: right;
  font-size: 16px;
  color: #6a6c6f;
}

.accordion-option .toggle-accordion:before {
  content: "Expand All";
}

.accordion-option .toggle-accordion.accordions-expanded:before {
  content: "Collapse All";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.1.1/what-input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div class="container">
  <div class="accordion-option">
    <h2 class="title">Accordion Example</h2>
    <a class="toggle-accordion accordions-expanded" accordion-id="#accordion"></a>
  </div>
  <br/>
  <br/>
  <ul class="accordion" data-accordion="" data-allow-all-closed="true">
    <li class="accordion-item is-active" data-accordion-item="">
      <a class="accordion-title" data-parent="#accordion">
        <span style="padding-left:20px">
          <b>Collapsible Group Item #1</b>
        </span>
      </a>
      <div class="accordion-content" data-tab-content="">
        <div class="grid-x grid-margin-x">
          <div class="cell medium-auto">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
          </div>
        </div>
    </li>
  </ul>
  <ul class="accordion" data-accordion="" data-allow-all-closed="true">
    <li class="accordion-item is-active" data-accordion-item="">
      <a class="accordion-title" data-parent="#accordion">
        <span style="padding-left:20px">
          <b>Collapsible Group Item #2</b>
        </span>
      </a>
      <div class="accordion-content" data-tab-content="">
        <div class="grid-x grid-margin-x">
          <div class="cell medium-auto">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
          </div>
        </div>
    </li>
  </ul>
  <ul class="accordion" data-accordion="" data-allow-all-closed="true">
    <li class="accordion-item is-active" data-accordion-item="">
      <a class="accordion-title" data-parent="#accordion">
        <span style="padding-left:20px">
          <b>Collapsible Group Item #3</b>
        </span>
      </a>
      <div class="accordion-content" data-tab-content="">
        <div class="grid-x grid-margin-x">
          <div class="cell medium-auto">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
          </div>
        </div>
    </li>
  </ul>
</div>

Good Luck to everyone.

Answer 2

To add to Jatin's answer, the "Open all" function would look like this (one other change besides 'up' to 'down'):

function openAll() {
  $('.accroot').each(function () {
    var $acc = $(this);
    var $openSections = $acc.find('.accordion-item .accordion-content');
    $openSections.each(function (i, section) {
      $acc.foundation('down', $(section));
    });
  });
}

Answer 3

You can do it as follows, run the snippet and see it in action.

$(document).foundation();

function closeAll() {
  $('.accroot').each(function () {
    var $acc = $(this);
     var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
     $openSections.each(function (i, section) {
                    $acc.foundation('up', $(section));
                });
  });
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.js"></script>
<button type="button" onclick="closeAll()"> Close All </button>
<ul class="accordion accroot" data-accordion data-allow-all-closed='true'>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content>
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>