Expand / Collapse Widgets

Examples of accessible expand/collapse widgets. Each widget is wrapped with a div.example and the controlled content uses a container with class="details".

Simple details

Click the button to show or hide details.

This is a simple expandable region. It is hidden by default and becomes visible when you activate the button above. The button updates aria-expanded and the region updates aria-hidden so assistive technologies know the current state.

Keyboard: Use Tab, then Space or Enter to toggle.
ARIA: aria-expanded on the button, aria-hidden on the content, aria-controls/aria-labelledby link them.

Animated details

This example smoothly animates height and contains nested content.