Accordion Example

About This Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the Accordion Pattern.

Example

Name:

Email:

Phone:

Extension:

Country:

City/Province:

Keyboard Support

Key	Function
`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.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
		`h3`	Element that serves as an accordion header. Each accordion header element contains a button that controls the visibility of its content panel. The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.
	`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.
`region`		`div`	Creates a landmark region that contains the currently expanded accordion panel.
	`aria-labelledby="IDREF"`	`div`	Defines the accessible name for the `region` element. References the accordion header button that expands and collapses the region. `region` elements are required to have an accessible name to be identified as a landmark.

JavaScript and CSS Source Code

CSS: accordion.css
JavaScript: accordion.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.