Expand/Collapse Widget Demonstration
This page shows three approaches: a native HTML details/summary, a custom toggle button, and an accordion where only one section stays open.
Native details/summary
Built-in HTML behavior. The controlled container is the details element itself with class details.
What is an expand/collapse widget?
An expand/collapse widget hides supplemental information until a user chooses to reveal it. This helps reduce visual clutter and lets readers focus.
- Click the header to toggle visibility.
- Use the keyboard: Tab to the summary, then Enter or Space to toggle.
- The element remembers its open state per page interaction.
Custom toggle button
A button controls a separate content region. The controlled container uses the details class.
This panel is controlled with JavaScript via the button above. It uses:
aria-controlsto associate the button with its panel.aria-expandedto reflect the current toggle state.role="region"andaria-labelledbyfor screen readers.
Try clicking the button again to collapse the content.
Accordion (single expansion)
Only one section is expanded at a time. Each controlled content container has the details class.
Begin by choosing the appropriate expand/collapse pattern:
- Use native
<details>for simple disclosure. - Use a button-controlled panel for custom styling and logic.
- Use an accordion when space is limited and items are mutually exclusive.
- Ensure the control is a real
button. - Keep
aria-expandedin sync with visibility. - Link controls and panels with
aria-controls. - Provide a label via
aria-labelledbyoraria-label.
Common styling approaches:
- Animate the disclosure indicator (arrow) to rotate on expand.
- Use borders and subtle shadows for visual separation.
- Match spacing and typography to your design system.