Expand / Collapse Widget

Two examples of an accessible expand/collapse widget. Each widget is wrapped in a container with the example class. The controlled content container uses the details class.

This content is controlled by the button above. It demonstrates how to implement an expand/collapse widget with proper ARIA attributes: the button uses aria-expanded and aria-controls, and the content region uses role="region" and aria-hidden.

Keyboard-accessible: Space / Enter trigger the toggle (native button behavior).
Smooth open/close animation powered by JavaScript measuring content height.
Visually indicates open state by rotating the caret.

Highlights:

Faster rendering of lists.
Improved keyboard navigation.
Bug fixes and performance improvements.

This example starts open to show how the widget handles an initially expanded state.

Tip: Buttons are real <button> elements so they work with keyboards and assistive technology out of the box.