biofriction-wp-theme/node_modules/foundation-sites/docs/pages/accordion.md

title	description	sass	js	video
Accordion	Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.	scss/components/_accordion.scss	js/foundation.accordion.js	y_BX7saf65Q

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.

The `disabled` option disables all up, down, and toggle methods of an accordion. If you wish to manipulate a disabled accordion with JavaScript, you will need to remove the `disabled` option from the accordion.

<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, http://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">