Expand / Collapse Widget Examples

Native details element

Uses the browser's native details/summary with a dedicated content container that has class="details".

Native: Learn more about the widget Click to open
The HTML details element provides a native expand/collapse experience that is keyboard accessible and works without JavaScript. This demo wraps the controlled content inside a container with class="details" so it can be styled and animated in CSS.

Custom toggle (button + controlled content)

A fully script-driven widget: button uses aria-expanded and aria-controls to control the container with class="details". Supports Escape to close.

This content is controlled by the button above. The button updates aria-expanded and the panel toggles the class "open" to animate expansion and collapse.

Accordion (multiple sections)

Keyboard: Up/Down to move, Home/End to jump. Only one section opens at a time.