Skip to main content

Accessible Expand/Collapse Widget Examples

Each example uses a button to expand or collapse a content region. The content container for each widget uses the class "details".

Example 1 — Collapsed by default
Initial state: collapsed
Example 2 — Expanded by default
Initial state: expanded

Visible details

This section is expanded by default. Notice that assistive technologies can locate this region through the region role and the aria-labelledby reference to the control.

The button's aria-expanded attribute is synchronized with the visible state of the content.