Expand/Collapse Widgets
Three examples: a native details element, a button-controlled panel, and a single-select accordion. Each widget is wrapped with an "example" container, and the controlled content uses the "details" class.
Native Details Element
▸ What is an expand/collapse widget?
An expand/collapse widget lets users reveal additional content on demand. The native HTML details element provides this behavior with built-in accessibility and keyboard support.
Tip: The triangle indicator rotates when expanded. This example uses the
- Built-in keyboard support
- Declarative open/closed state
- Accessible by default
Button-Controlled Panel
This panel is controlled by a button using JavaScript. It toggles the hidden attribute and keeps aria-expanded in sync.
This approach is useful when you need custom behavior beyond what the
- Custom transitions and layouts
- Full control over open state in JS
- Works with ARIA relationships
Accordion (Single-Select)
Accordions present multiple sections where only one can be expanded at a time. Opening one section collapses the others.
Great for FAQs or grouped content.
Each item uses a button with aria-controls to point to its content container, and aria-expanded to reflect the state.
- ARIA-compliant relationships
- Keyboard focus stays on the toggle
- Content region is labelled by the button
Accessible accordions update aria-expanded on the toggle and avoid hiding content in a way that confuses assistive tech. Using the hidden attribute is generally safe.
Always test with screen readers for your specific use case.