Expand / Collapse Widget Examples

This is a simple expand/collapse panel. The button controls the visibility using aria-expanded and aria-controls. The content area has the class "details".

This panel contains some interactive controls — links and a small form. Keyboard users can tab into these when the panel is open.

Learn more

This example begins opened. The script on the page will measure and allow a smooth transition between open and closed states.

Expand / Collapse Widget Demo