Expand/Collapse Widgets

Examples of native and scripted expand/collapse controls. Each widget is wrapped in an element with the “example” class, and the container for controlled content uses the “details” class.

Native details/summary

Read more about native details
The HTML details element provides a built-in accessible disclosure widget. Clicking the summary toggles the visibility of the content inside. It supports keyboard interaction and preserves state on page refresh in some browsers.

Button-controlled content

Accordion (one section open at a time)

What is an accordion?
An accordion is a vertically stacked set of sections. Only one section is expanded at a time.
Why use an accordion?
It helps organize content in a compact space, improving scannability and reducing scrolling.
Is this accessible?
The native details element is accessible by default. The script ensures only one section is open at a time, which users often expect from an accordion.