Expand/Collapse Widgets

Examples include native HTML and accessible button-controlled panels. Each widget is wrapped in an element with class example, and the container for controlled content uses class details.

Native HTML details/summary
What is an expand/collapse widget?

An expand/collapse widget hides non-essential content until requested by the user. The native HTML <details> element provides built-in keyboard and screen reader support.

Tip: You can nest rich content, links, and images inside <details>.

Button-controlled collapse
Collapsed
Accordion (only one section open)