Expand/Collapse Widgets
Examples of expandable panels using the native details element and a custom ARIA-controlled toggle.
Native widget using the details element
How does this work?
The native <details> element provides built-in expand/collapse behavior with keyboard and mouse support. The content below the summary is revealed when open.
- It toggles without JavaScript.
- It is accessible by default in most modern browsers.
- You can enhance styles while keeping semantics.
Custom button-controlled panel
Press to reveal content
This panel is controlled via a button with aria-expanded and aria-controls. The region has role="region" and is labeled by the controlling button.
Use this pattern when you need custom behavior, animations, or cross-browser consistency.
- Accessible labeling via
aria-labelledby. - Programmatic control with JavaScript.
- Can update button text when expanded/collapsed.
Accordion (group of expand/collapse items)
Only one section open at a time (optional behavior).
Content for section one. This uses the same pattern as the custom panel above.
Content for section two. Toggle to expand and collapse.
Content for section three.