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.

Example

Personal Information: *Name:

*Email:

Phone:

Extension:

Country:

City/Province:
Billing Address: Address 1:

Address 2:

City:

State:

Zip Code:
Shipping Address: Address 1:

Address 2:

City:

State:

Zip Code:

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

CSS:
1. customize.css
JavaScript:
1. helpers.js
2. setup.js

Accordion Example

Example

Keyboard Support

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

HTML Source Code