Accordion

Accordions are a vertically stacked list of headers that toggle the display of related sections of content.

Accordions can decrease cognitive load by grouping information and only presenting content that the user has selected. However, given their purpose, there is an inherent risk that users will miss information within the accordion. Do not use this component if it is crucial or required that a user review the content under all accordion headers.

Usage

Lorem Ipsum

Accordions panels are individual button elements styled with the accordion class. Within the button element, there is a span for the header content and a div for the icon. Accordions require javascript to toggle the accordion__closed and accordion__open classes, as well as the icon--plus-sign and icon--minus-sign on click.

<div class="c-accordion-group">
  <div class="c-accordion">
    <button class="c-accordion__header-button" aria-expanded="false">
        <span class="c-accordion__header-title">Accordion Header</span>
        <div class="c-accordion__header-icon-container">
          <i class="icon icon--plus-sign c-accordion__header-icon"></i>
        </div>
    </button>
    <div class="c-accordion__closed" role="region">
        <div class="c-accordion__content">
          <p class="c-text-content">Lorem Ipsum</p>
        </div>
    </div>
  </div>
  <div class="c-accordion">
    <button class="c-accordion__header-button" aria-expanded="false">
        <span class="c-accordion__header-title">Accordion Header</span>
        <div class="c-accordion__header-icon-container">
          <i class="icon icon--plus-sign c-accordion__header-icon"></i>
        </div>
    </button>
    <div class="c-accordion__closed" role="region">
        <div class="c-accordion__content">
          <p class="c-text-content">Lorem Ipsum</p>
        </div>
    </div>
  </div>
</div>

Copy

Accessibility

Accordion containers must contain an aria-expanded attribute with a value of true or false to toggle the display of the header's content region.

Design Environment

Accordions require at least a medium vertical margin.l-margin-vertical--medium and will fill 100% container width.