An expand/collapse widget lets users reveal or hide additional information on demand, helping reduce visual clutter.
- Uses the HTML details/summary elements.
- Works without JavaScript.
- Accessible by default with keyboard and screen readers.
Examples of native and custom expand/collapse controls.
An expand/collapse widget lets users reveal or hide additional information on demand, helping reduce visual clutter.
When building a custom expand/collapse, ensure the button uses aria-expanded and aria-controls, and the controlled content is toggled with the hidden attribute.
Provide keyboard support and manage focus for a usable experience.
This section starts expanded. Clicking another header will collapse it.
Use clear labels, respect user preferences, and avoid hiding critical information behind collapsible panels.
Yes. Native details elements can be nested, though keep the hierarchy simple to avoid confusion.
Native details/summary works without JavaScript. Custom panels use minimal JavaScript to toggle visibility.