Expand/Collapse Widgets
Three examples: native details/summary, a button-controlled panel, and a multi-item accordion. Each content container uses the class details.
1) Native details/summary
About this section
This uses the built-in HTML <details> and <summary> elements. The content below is the controlled area wrapped by a container with class details.
- Click the summary row to expand or collapse.
- Keyboard accessible by default: Space/Enter toggles.
- You can nest any HTML content inside.
2) Button-controlled panel
This panel is controlled by a button using aria-controls and aria-expanded. The content container is a <div> with class details and the hidden attribute for initial collapse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae tortor dui. Integer efficitur malesuada nunc, non bibendum ligula.
3) Accordion (single open item)
Content for section one. When this opens, other items in the same accordion group will close.
Content for section two. This panel is also a details container.
Content for section three. Add any markup here.