Expand / Collapse Widgets
Examples of accessible expand/collapse widgets. Use the buttons to reveal or hide content. All controls are keyboard operable and labeled. Content containers use the class "details".
This section contains additional information that expands and collapses. The region uses the class "details". When collapsed, the content is removed from the accessibility tree using the hidden attribute.
Tip: You can also navigate to the control and press Enter or Space to toggle it.
Notes
- Buttons expose their state via aria-expanded and point to the controlled content with aria-controls.
- Controlled content uses role="region" and aria-labelledby to provide an accessible name derived from the button's text.
- Hidden content uses the hidden attribute to remove it from the accessibility tree while collapsed.