An expand/collapse widget reveals additional content on demand. It helps reduce visual clutter by keeping secondary information hidden until needed.
- Keyboard accessible by default
- No JavaScript required
- Works across modern browsers
Three approaches: native details/summary, a button-controlled panel, and an accordion.
Uses the built-in details element. Toggle by clicking or pressing Enter/Space on the summary.
An expand/collapse widget reveals additional content on demand. It helps reduce visual clutter by keeping secondary information hidden until needed.
A custom toggle that controls a separate content container.
This panel is controlled by the button above. It uses aria-expanded and aria-controls for accessibility, and the content region is labelled by the controlling button.
Try toggling it a few times to see the state updates.
A group of sections where opening one closes the others.
Begin by identifying content that benefits from progressive disclosure. Keep titles short, and ensure toggles are focusable and keyboard operable.
Decorate toggles with directional indicators and transitions. Avoid animating height directly; consider opacity and transform for smoother effects.