Expand/Collapse Widget Examples
Demonstrations of native details/summary and ARIA-controlled disclosure patterns.
Native details/summary Built-in
Project overview
This panel uses the HTML details/summary elements for an accessible and keyboard-friendly expand/collapse control. It requires no JavaScript for basic behavior and is supported by most modern browsers.
- Keyboard: Space/Enter toggles the summary.
- Screen readers announce expanded/collapsed state.
- Can be styled with CSS while preserving semantics.
Tip: You can nest content, such as lists, code samples, and images inside the details container.
ARIA disclosure button Custom
This panel is controlled via a button with aria-expanded and aria-controls.
Toggling updates ARIA attributes and shows/hides the content container with the details class.
Use cases include custom animations, advanced layout needs, or when you cannot use native details/summary.
- ARIA-compliant with status updates.
- Works with screen readers and keyboard navigation.
- Easy to integrate with custom transitions.
Grouped sections with controls Multiple
Section A: Introduction
Learn the basics of the topic, including terminology and key concepts.
Section B: Configuration
Step-by-step configuration guidance and common pitfalls to avoid.
Section C: Advanced Tips
Performance tuning, debugging strategies, and expert recommendations.
Nested disclosure example Nested
Parent topic
This parent section contains a nested, button-controlled panel inside.
Nested disclosures can be useful for progressively revealing complex information without overwhelming the user.