Accordion Group Example
The below example section contains a form divided into three steps, each in an accordion. The form has one step open at a time, and demonstrates a behavioral variation of the design pattern for accordions.
Similar examples include:
- Accordion: A series of simple accordions containing basic text, with no limitations on the number of accordions open at once.
Example
Keyboard Support
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Tab |
|
Shift + Tab |
|
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
h3 |
|
||
aria-expanded="true" |
button |
Set to true when the Accordion panel is expanded, otherwise set to false .
|
|
aria-controls="ID" |
button |
Points to the ID of the panel which the header controls. | |
aria-disabled="true" |
button |
If the open panel cannot be closed, set aria-disabled to true when the Accordion panel is expanded.
|
|
group (Optional) |
div |
Creates a form group that contains the fields in the open panel. | |
aria-labelledby="IDREF" |
div |
|
Javascript and CSS Source Code
- CSS: accordion-group.css
- JavaScript: accordion.js
- JavaScript: accordionGroup.js
HTML Source Code