Expand / Collapse widget examples
Two accessible patterns for expand/collapse content. Each widget is wrapped with a div.example and the controlled panel uses a container with the class "details". Use the keyboard (Tab and Enter/Space) to operate. Press Escape to close an open panel.
Simple toggle
This content is shown when you activate the "Show more details" button. It is implemented as a controlled region with the class details. The toggle button has aria-expanded and aria-controls attributes so assistive technologies know the relationship and state.
Tip: You can close this panel with the Escape key while focus is on the toggle button.
Interactive panel
This panel contains interactive controls. All controls have visible labels and remain keyboard operable at narrow viewports.
Notes on keyboard and accessibility
- Buttons use native semantics; they are keyboard operable and include
aria-expandedandaria-controls. - Panels have the class
details, are hidden with thehiddenattribute when collapsed, and are exposed as regions withrole="region"andaria-labelledbyfor context. - Escape closes an open panel when focus is on a toggle button.
- All interactive elements have visible labels and visible focus indicators. Color is not the only cue for state.