Expand/Collapse Widget Examples
These examples show accessible expand/collapse widgets. Each widget is wrapped in an example container, and the controlled content uses the details class.
Basic Toggle
This is a basic expand/collapse widget. Click the button again to hide this content.
- Uses a button with
aria-expandedandaria-controls - Press
Escwhile focused inside to collapse - The content region is focusable to aid accessibility
Tip: Try tabbing to the button and pressing Enter/Space.
Initially Expanded
This widget starts expanded. The button text and state reflect the initial open condition.
Why use this pattern?
- Improves page scanability by hiding optional content
- Reduces cognitive load
- Keeps layouts compact
Long Content Section
Designing Expand/Collapse Interactions
When implementing expand/collapse interactions, be mindful of discoverability and state visibility. Provide clear labeling, use progressive disclosure where appropriate, and keep interaction costs low.
Best practices include:
- Provide descriptive buttons, e.g., “Show details” vs. “Hide details”
- Reflect current state with
aria-expanded - Ensure keyboard and screen-reader access
- Maintain focus context when content appears
For longer sections, consider a summary or preview to help users decide whether to reveal the rest.