Accordion

Basics

The container for an accordion needs the class .accordion, and the attribute data-accordion. Note that in these examples, we use a <ul>, but you can use any element you want.

<ul class="accordion" data-accordion></ul>

Inside the accordion, place a series of panes with the class .accordion-item and the attribute data-accordion-item. To mark which pane should be open by default, add the class .is-active to that pane.

Each pane has a title, an <a> with the class .accordion-title, and a content area, an element with the class .accordion-content and the attribute data-tab-content.

Watch this part in video

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <!-- ... -->
</ul>

Once you put it all together, here's what you get!

• Accordion 1

  Panel 1. Lorem ipsum dolor

  Nowhere to Go
• Accordion 2
  I do nothing!
• Accordion 3
  Type your name!

Advanced Options

Multi-expand

By default, only one pane of an accordion can be open at a time. This can be changed by setting the multiExpand option to true.

Watch this part in video

<ul class="accordion" data-accordion data-multi-expand="true">
  <!-- ... -->
</ul>

• Accordion 1
  Panel 1. Lorem ipsum dolor
• Accordion 2
  Panel 2. Lorem ipsum dolor
• Accordion 3
  Panel 3. Lorem ipsum dolor

All Closed

By default, at least one pane in an accordion must be open. This can be changed by setting allowAllClosed option to true.

Watch this part in video

<ul class="accordion" data-accordion data-allow-all-closed="true">
  <!-- ... -->
</ul>

• Accordion 1
  Panel 1. Lorem ipsum dolor
• Accordion 2
  Panel 2. Lorem ipsum dolor
• Accordion 3
  Panel 3. Lorem ipsum dolor

Disabled

There may be times where you want to disable pane switching on an accordion. This can be accomplished by setting the disabled option.

<ul class="accordion" data-accordion disabled>
  <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. I'm open because I'm loaded that way, but you can't close me
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2, you can't open me.</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, you can't open me.</a>
    <div class="accordion-content" data-tab-content>
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

Accordion and URLs

Browser history

When the data-deep-link option is set to true, the current state of the accordion is recorded by adding a hash with the accordion panel ID to the browser URL when a accordion opens. By default, accordion replace the browser history (using history.replaceState()). Modify this behavior by using attribute data-update-history="true" to append to the browser history (using history.pushState()). In the latter case the browser back button will track each click that opens a accordion panel.

By using deep linking (see below), the open state of a page's tabset may be shared by copy-pasting the browser URL.

Deep linking

Add the attribute data-deep-link="true" to a accordion to:

• modify the browser history when a accordion panel is clicked
• allow users to open a particular accordion panel at page load with a hash-appended URL

<ul class="accordion" data-accordion data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" id="deeplinked-accordion">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#deeplink1" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content id="deeplink1">
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#deeplink2" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content id="deeplink2">
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#deeplink3" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content id="deeplink3">
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

For example, https://example.com/#deeplink3 will open the third accordion panel at page load. This example will open a new browser tab and scroll you to the open accordion panel.

When linking directly to a accordion panel, it might not be obvious that the content appears within a accordion panel. An additional attribute data-deep-link-smudge rolls the page up slightly after deep linking (to a horizontal accordion) so that the accordion is at the top of the viewport.

<ul class="accordion" data-deep-link="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="600" data-accordion id="deeplinked-accordion-with-smudge">

@include accordion-container;

@include accordion-item;

@include accordion-title;

@include accordion-content;

var elem = new Foundation.Accordion(element, options);

$('#element').foundation('toggle', $target);

$('#element').foundation('down', $target);

$('#element').foundation('up', $target);

$('#element').foundation('_destroy');