Expand/Collapse Widgets
Three approaches: native details/summary, a basic button-controlled panel, and a panel with smooth open/close animation.
Example 1: Native details/summary
What is an expand/collapse widget?
An expand/collapse widget (also called a disclosure) shows or hides additional information on demand. The native HTML element <details> with a <summary> provides built-in accessibility and keyboard support.
- Click or press Enter/Space to toggle.
- Screen readers announce the expanded state.
- No JavaScript required for basic behavior.
The container for the controlled content has a details class.
Example 2: Button-controlled panel
This panel is controlled via a button using aria-expanded and aria-controls. JavaScript toggles the hidden attribute on the content container.
Use this pattern when you need custom behavior or visuals beyond the native <details> element.
The content container uses the class details and starts hidden.
Example 3: Smooth animated panel
For accessible disclosures:
- Use a native
<details>or a<button>witharia-expandedandaria-controls. - Keep focus on the control; do not move focus unexpectedly.
- Ensure the toggle state is programmatically determinable.
This example adds a smooth open/close animation using a CSS grid trick while preserving accessibility.
The animated wrapper manages the transition; the content itself remains a details-class container.