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.

Section A content. Accordions help group related content in collapsible panels. This panel is controlled by a button with aria-expanded.

Section B content. When one section opens, the others close. Use Up/Down, Home/End to navigate the section headers.

Section C content. This example demonstrates a common accessible accordion pattern and keyboard support.

Expand / Collapse Widget Examples

Native details element

Custom toggle (button + controlled content)

Accordion (multiple sections)

Section A: Overview

Section B: Details

Section C: Notes