Accessible Expand/Collapse Widget

This page demonstrates an accessible expand/collapse widget. Each widget is wrapped in a container with class "example" and the controlled content container has the class "details". Use Enter or Space to toggle; press Escape to close when open.

Press Enter or Space to toggle

About this widget

This content is inside the expandable region. When collapsed, assistive technologies are informed via aria-hidden. Focusable controls inside will still receive focus if tabbed to; use Escape to quickly close the region and return focus to the toggle.

Examples of interactive elements inside:

A link inside the details

When open, the chevron rotates and the container expands smoothly.