This content is revealed using the native HTML details/summary element.
- It is keyboard-accessible by default.
- It can be nested within other content easily.
- Screen readers announce its expanded/collapsed state.
Expand/Collapse Widgets
Below are different expand/collapse widgets. Each widget is wrapped in a container with an "example" class. The controlled content container uses the "details" class.
Native HTML details/summary
Uses the built-in details element with a summary.
What is contained in this section?
Button-controlled region
A button toggles visibility of a controlled content container.
This region is controlled by the button above using ARIA attributes.
It receives focus on first focusable element when opened.
Accordion (single-open)
Only one section opens at a time in this group.
An overview with a quick summary of the accordion interface.
- Click or press Enter/Space to toggle.
- Arrow keys navigate between headers.
- Home/End jump to first/last header.
More in-depth information is provided in this section.
- Supports rich content and interactive elements.
- Closes other open sections automatically.
- Uses ARIA to convey state to assistive technologies.
Useful references and links: