Accordion Example

Please provide feedback for this example in issue 210.

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. This example does not implement any of the optional keystrokes included in the accordion pattern.


Keyboard Support

Key Function
Space or Enter When focus is on the accordion header of a collapsed section, expands the section.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
heading dt
  • Creates the accordion header.
  • The accordion structure is built on an HTML definition list where each term is recast as a header and each definition is recast as a panel.
aria-level=3 dt Specifies heading level for the accordion header.
button a A button inside the accordion header that provides hide/show functionality.
aria-expanded=true a Set to true when the Accordion panel is expanded, otherwise set to false.
aria-controls=ID a Points to the ID of the panel which the header controls.
aria-disabled=true 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
  • Points to the accordion header.
  • Labels the landmark region with the accordion header.

Javascript and CSS Source Code

HTML Source Code