Accordion

This example page is work in progress. Provide feedback in issue 67.

The below example section contains a 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

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:

Accessibility Features

Please replace this content with a list of accessibility features demonstrated in this implementation, such as:

ARIA roles
property and state information
Event handlers
tabindex values

Keyboard Support

Key	Function
key 1	Key 1 action
key 2	Key 2 action
key 3	Key 3 action

ARIA Roles, Properties, and States

Role	Property/State	Element	Usage
role		element X	Identify element with the role behavior
	aria-xxxxx	X[role="yyy"] element	Purpose of aria properties or aria states within example

Javascript and CSS Source Code

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