Basic Expand/Collapse Panel
A single button reveals and hides additional content. The button updates its label dynamically and keeps the controlled
region in sync with aria-expanded.
This panel illustrates a straightforward expand/collapse pattern. Key features include synchronized
aria-expanded, toggling the hidden attribute on the controlled region, and label swapping on the toggle button.
- Keyboard friendly – buttons are fully focusable.
- ARIA relationships connect the toggle to the content.
- Minimal JavaScript keeps state consistent.
Accordion with Single-Open Behavior
This accordion demonstrates how to coordinate multiple toggles. Opening one panel closes the rest, ensuring only a single section is visible at any time.
Each accordion header is a button. A shared data-group attribute enforces single-open behavior by closing siblings on interaction.
- Click any header to expand its content.
- Focus indicators make navigation clear for keyboard users.
- State changes update
aria-expandedand the toggle label.
- Use semantic buttons for triggers.
- Maintain two-way linkage with
aria-controlsandaria-labelledby. - Mirror the open state with
aria-expanded. - Ensure focus styles are visible and high contrast.
Controlled regions share the details class, making it easy to apply consistent styling or transitions.
The script that powers these widgets is minimal and reusable across different layouts.