Skip to main content

Accordion

JSThis component requires JavaScript.
Component status:Beta
The accordion component delivers large amounts of content in a small space through progressive disclosure.

Example#

<div class="bux-accordion" data-allow-multiple>
<h3 class="bux-accordion__heading">
<button id="bux-accordion__trigger--1" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--1" aria-expanded="false">
<span class="bux-accordion__icon" aria-hidden="true"></span>
<span class="bux-accordion__title"> Ohio Union </span>
</button>
</h3>
<div id="bux-accordion__panel--1" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--1" hidden>
...
</div>
<h3 class="bux-accordion__heading">
<button id="bux-accordion__trigger--2" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--2" aria-expanded="false">
<span class="bux-accordion__icon" aria-hidden="true"></span>
<span class="bux-accordion__title"> Mirror Lake </span>
</button>
</h3>
<div id="bux-accordion__panel--2" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--2" hidden >
...
</div>
<h3 class="bux-accordion__heading">
<button id="bux-accordion__trigger--3" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--3" aria-expanded="false">
<span class="bux-accordion__icon" aria-hidden="true"></span>
<span class="bux-accordion__title"> The Oval </span>
</button>
</h3>
<div id="bux-accordion__panel--3" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--3" hidden>
...
</div>
</div>

When to use an Accordion#

  • This is good when you want to allow users to expose content in a progressive manner
  • You want to give users control over the content by expanding it or deferring it for later

When to use something else#

  • If the text you are revealing is very long then it would be better to give that information its own page
  • Long content and accordions can be problematic on mobile views because the user must scroll a lot to either close the accordion or get to the next option
  • Keep in mind that even though accordions shorten pages and reduce scrolling, they increase the interaction cost by requiring people to decide on topic headings.

Implementation notes#

Each trigger and panel pair must be associated with each other by the following properties:

Trigger#

  • id="TRIGGER_ID" — a unique identifier for the trigger element.
  • aria-controls="PANEL_ID" — tells assistive technologies that this element controls another element.
  • aria-expanded="true|false" — tells assistive technologies that this element has been expanded or not.

Panel#

  • id="PANEL_ID" — a unique identifier for the panel element.
  • role="region" — tells assistive technologies that this area in the document that the author has identified as significant
  • aria-labelledby="TRIGGER_ID" — tells assistive technologies that this element is labeled by another element.
  • hidden — hides all non-active panels.

Unless you are hand-coding this markup, you will want to generate a unique id for each pair and apply it via a for loop.

Multiple attribute#

There is an optional attribute that you can add to the main <div> element.

  • data-allow-multiple — This will allow for multiple accordion sections to be expanded at the same time.

<div class="bux-accordion" role="presentation" data-allow-multiple></div>

Accessibility#

Keyboard support#

KeyFunction
Space or Enter

When focus is on the accordion header of a collapsed section, expands the section.

Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the accordion are included in the page tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the accordion are included in the page tab sequence.
Down Arrow
  • When focus is on an accordion header, moves focus to the next accordion header.
  • When focus is on last accordion header, moves focus to first accordion header.
Up Arrow
  • When focus is on an accordion header, moves focus to the previous accordion header.
  • When focus is on first accordion header, moves focus to last accordion header.
Home

When focus is on an accordion header, moves focus to the first accordion header.

End

When focus is on an accordion header, moves focus to the last accordion header.

Resources#