Accordion

An accordion list uses an HTML description list to group togglable elements together.

Description terms can be toggled independently by using the individual toggle buttons or all together by using the open/close all button.

Each <dt> contains a <button> element that is used to toggle the contents of the corresponding <dd> element. In order to link these two elements:

1. Each button must have an id attribute with a unique value.
2. Each <dd> must have an aria-labelledby attribute whose value matches the corresponding button id.

Open All

Accordion One

This is the content of the accordion.

Accordion Two

This is the content of the accordion.

Accordion Three

This is the content of the accordion.

<button
  class="cmp-button cmp-accordion-toggle-all js-toggle-all"
  aria-controls="sample-list"
  aria-hidden="true"
>
  Open All
</button>
<dl id="sample-list" class="cmp-accordion">
  <dt>
    <button
      id="item1"
      class="cmp-accordion__button js-toggler"
      aria-expanded="true"
    >
      Accordion One
    </button>
  </dt>
  <dd
    class="cmp-accordion__content"
    aria-labelledby="item1"
    aria-hidden="false"
  >
    This is the content of the accordion.
  </dd>
  <dt>
    <button
      id="item2"
      class="cmp-accordion__button js-toggler"
      aria-expanded="true"
    >
      Accordion Two
    </button>
  </dt>
  <dd
    class="cmp-accordion__content"
    aria-labelledby="item2"
    aria-hidden="false"
  >
    This is the content of the accordion.
  </dd>
  <dt>
    <button
      id="item3"
      class="cmp-accordion__button js-toggler"
      aria-expanded="true"
    >
      Accordion Three
    </button>
  </dt>
  <dd
    class="cmp-accordion__content"
    aria-labelledby="item3"
    aria-hidden="false"
  >
    This is the content of the accordion.
  </dd>
</dl>

Accessibility

• Each toggle button uses aria-expanded to communicate whether its panel is open or closed.
• Each <dd> panel uses aria-labelledby to associate it with its corresponding <dt> button.
• The Open All / Close All button toggles every panel and updates all aria-expanded states accordingly.
• Keyboard: Users can tab to each accordion button and activate it with Enter or Space. When a panel is open, tabbable content inside it is reachable in the natural tab order.
• Toggle buttons are native <button> elements, so they receive focus styles and are announced as buttons by screen readers.