Accordions

Requires JavaScript

accordion

Use whenever you want to toggle additional or related information in a sibling <div>. Built to be stacked or nested. You can also manually toggle this by adding the active class to accordion__content.

Demo

Markup

<div class="accordion">
  <a href="#" class="accordion__header">
    <!-- Accordion header goes here! -->
  </a>
  <div class="accordion__content">
    <!-- Accordion content goes here! -->
  </div>
</div>