Accordion
An accordion is a heading with collapsible content. It allows for content to be hidden from all users until a user requests that the information be presented to them.
Expand and collapse any specific accordion by clicking or tapping on the accordion heading. Keyboard and screen reader users will be informed of a "button" when they encounter the accordion toggle.
Expand and collapse all accordions with the Expand all/Collapse all toggle button which is provided with groups of 2 or more accordions.
Code
Single Accordion
<details>
<summary>Accordion 1</summary>
Accordion content (Collapsed)
</details>
Single Accordion Demo
Accordion 1
Accordion content (Collapsed)Accordion wrapper
Wrapping accordions in the following wrapper will add an Expand/Collapse all button using Javascript.
<div class="accordion-set {accordion-style}">
<!-- Single Accordions (as many as you want) -->
</div>
Multiple Accordion Wrapper Demo
Accordion 1
Accordion content (Collapsed)Accordion 2
Accordion content (Collapsed)Accordion 3
Accordion content (Collapsed)Single-selection
These accordions can only be opened one at a time. Opening one accordion will close any other open accordions. Requires the name attribute to be the same on multiple accordions in a group.
<details class="{accordion-style}" name="unique-name-here">
<summary>Accordion 1</summary>
<!-- Accordion content (Collapsed) -->
</details>
<details class="{accordion-style}" name="unique-name-here">
<summary>Accordion 2</summary>
<!-- Accordion content (Collapsed) -->
</details>
Single Selection Demo
Accordion 1
Accordion content (Collapsed)Accordion 2
Accordion content (Collapsed)Accordion 3
Accordion content (Collapsed)Classes
{accordion-style}
Modifies the overall visual style for the accordion.
| Class | Style |
|---|---|
| Default (no class) | Presents accordions with a  and  icon to the left of the accordion header. |
.compact |
Presents accordions with a  and  icon to the left of the accordion header. |
.classic |
Presents accordions with a 1px border and a red chevron arrow icon. |
.simple |
Presents accordions with a 1px border on the top and bottom of each accordion with a black chevron arrow icon. |
.menu |
Presents accordions with a burger icon. It will add a background when opened, which can be removed by adding the class .no-background to the same element that the .menu class is added to. |
Accordion Demo
Big Red Bear's Dining Picks
Gimme Coffee Gates Hall Dessert Alerts - Never miss another Apple Brown Butter Bar!
Pizza Alerts! - From Big Red sauce to garlic pesto, we've got you covered!
More Big Red Bear Picks
Gimme Coffee Gates Hall Dessert Alerts - Never miss another Apple Brown Butter Bar!
Pizza Alerts! - From Big Red sauce to garlic pesto, we've got you covered!
Never Enough Big Red Bear Picks
Gimme Coffee Gates Hall Dessert Alerts - Never miss another Apple Brown Butter Bar!
Pizza Alerts! - From Big Red sauce to garlic pesto, we've got you covered!
Nested Accordion
Gimme Coffee Gates Hall Dessert Alerts - Never miss another Apple Brown Butter Bar!
Pizza Alerts! - From Big Red sauce to garlic pesto, we've got you covered!
Accessibility Expectations
All States
| Modality | Expected Behavior (All states) | Criterion |
|---|---|---|
| Visual | An accordion toggle should have a visual cue that there is hidden content that can be shown. | UX (Major) |
| Visual | Icons used to indicate the collapsed/expanded state must have a 3:1 color contrast ratio. | 1.4.11 |
| Keyboard | An accordion toggle must be keyboard focusable. | 2.1.1 |
| Keyboard | While an accordion toggle has keyboard focus, a focus indicator must be visible. | 2.4.7 |
| Keyboard | While an accordion toggle has keyboard focus the accordion must expand and collapse with ENTER and SPACEBAR. | 2.1.1 |
| Screen Reader | If an accordion toggle is also a heading, the screen reader must announce both the heading level and the expanded/collapsed state. | 4.1.2, 1.3.1 |
Collapsed state
| Modality | Expected Behavior (Collapsed) | Criterion |
|---|---|---|
| Visual | An accordion toggle should have a text cue/icon that there is hidden content that can be shown. | UX (Major) |
| Visual | Collapsed content must not be visible to the user. | 1.3.1 |
| Keyboard | While an accordion is collapsed, keyboard focus is not granted to any hidden content. | 2.4.3 |
| Keyboard | While an accordion is collapsed, keyboard focus must move to the next visible focusable element on the next press of the Tab key. | 2.4.3 |
| Screen Reader | An accordion toggle must announce a “button" element and a “collapsed" state or similar. | 1.3.1, 4.1.2 |
| Screen Reader | Hidden accordion contents must not be read aloud while the accordion is collapsed. | 1.3.2, 1.3.1 |
Expanded state
| Modality | Expected Behavior (Expanded) | Criterion |
|---|---|---|
| Visual | An accordion toggle should have a text cue/icon that the expanded content can collapse. | UX |
| Visual | Expanded content must be visible in full and not clip through other elements. | 1.4.4 |
| Keyboard | If an expanded accordion has focusable content, it must gain keyboard focus in the visual order. | 2.4.3 |
| Screen Reader | An accordion toggle must announce a “button" element and an “expanded" state or similar. | 1.3.1, 4.1.2 |
| Screen Reader | The full contents of an expanded accordion must not be hidden to assistive technology. | 1.3.1 |
Developer Notes
- Accordions will be used with all
<details>and<summary>tag pairs without the need for extra classes or ids. - If you need to edit the CSS for an accordion, it is primarily located in the _accordions.scss file.
Designer Notes
- You can modify the background color, padding, margin, and font properties of the accordion headers.
- You cannot easily add a background color to just the content when the accordion is expanded.