Foundation Accordion

Foundation provides accordion components for creating collapsible content sections.

Basic Accordion

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item #1</a>
    <div class="accordion-content" data-tab-content>
      <p>This is the first item's accordion body. It is shown by default.</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item #2</a>
    <div class="accordion-content" data-tab-content>
      <p>This is the second item's accordion body. It is hidden by default.</p>
    </div>
  </li>
</ul>

Multiple Open Accordion

<ul class="accordion" data-accordion data-multi-expand="true">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">First Item</a>
    <div class="accordion-content" data-tab-content>
      <p>Can be open with other items.</p>
    </div>
  </li>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Second Item</a>
    <div class="accordion-content" data-tab-content>
      <p>Multiple items can be open at once.</p>
    </div>
  </li>
</ul>

Accordion with Icons

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">
      <i class="fi-torso"></i> Profile Settings
    </a>
    <div class="accordion-content" data-tab-content>
      <p>Manage your profile settings here.</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">
      <i class="fi-wrench"></i> Account Settings
    </a>
    <div class="accordion-content" data-tab-content>
      <p>Configure your account settings.</p>
    </div>
  </li>
</ul>

Nested Accordion

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Parent Item</a>
    <div class="accordion-content" data-tab-content>
      <ul class="accordion" data-accordion data-multi-expand="true">
        <li class="accordion-item is-active" data-accordion-item>
          <a href="#" class="accordion-title">Nested Item</a>
          <div class="accordion-content" data-tab-content>
            <p>This is a nested accordion item.</p>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Up next: Foundation Tabs