Expand / Collapse Widget

Three examples of an accessible expand/collapse widget. Each widget is wrapped in a container with class "example". The controlled content containers use the class "details".

This is a simple expandable area. It can contain any HTML content — paragraphs, lists, images, or forms.

Accessible: the control uses a button with aria-expanded and aria-controls.
Animated: the area opens and closes with a height transition.
Progressive: if JavaScript is disabled, the content will remain hidden unless modified by server-side markup.

This example starts open. The script will initialize its height so the transition system works when it is later collapsed.

Starts expanded (aria-expanded="true").
Contains richer content including a short list.
When collapsed, the chevron rotates and the content animates closed.

Expanding this reveals another expander widget inside. Nested expanders are fully supported:

Tips: Use the Enter or Space keys to toggle when a control has focus. The chevrons rotate to indicate state and the details are animated for a smoother experience.