Accordion Example
NOTE: This example has recently been updated to include support for optional keyboard interactions. Please provide feedback in issue 401.
The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion. In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time.
Example
Keyboard Support
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Down Arrow |
|
Up Arrow |
|
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. |
Control + Page Down |
|
Control + Page Up |
|
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
presentation |
dl |
|
|
heading |
dt |
Identifies the element as a heading that serves as an accordion header. | |
aria-level= |
dt |
|
|
button |
a |
Identifies the element as a button inside the accordion header that provides hide/show functionality. | |
aria-expanded= |
a |
Set to true when the Accordion panel is expanded, otherwise set to false .
|
|
aria-controls= |
a |
Points to the ID of the panel which the header controls. | |
aria-disabled= |
a |
If the accordion panel is expanded and is not allowed to be collapsed, then set to true .
|
|
region | dd |
Creates a landmark region that contains the currently expanded accordion panel. | |
aria-labelledby="ID_REF" |
dd |
|
Javascript and CSS Source Code
- CSS:
- JavaScript:
HTML Source Code