Expand / Collapse Widget Examples

Each widget below is wrapped in a div.example and the controlled content container uses the class details.

Simple disclosure

What you'll see: This content is hidden by default. Clicking the button expands this panel where you can put any information — text, images, code, or other controls.

Accessible: the button has aria-expanded and aria-controls.
Animated: smooth expand/collapse using height animation.
Wrapped: the widget is inside a div.example and the content has class details.

Initially open

This example starts expanded. The script will honor the initial aria-hidden value on page load.

Try collapsing and re-opening — the animation should be consistent.

Multiple paragraphs