Expand/Collapse Widget Demo

Two approaches are shown below: the native HTML details/summary element and a custom button-controlled toggle. Each widget is wrapped in a container with class "example", and the controlled content uses the "details" class.

Native details/summary

What is an expand/collapse widget?

An expand/collapse widget allows you to reveal or hide related content. The native HTML <details> element includes keyboard and screen reader support out of the box.

  • Built-in accessibility and keyboard interaction
  • Works without JavaScript
  • Simple to style for most use cases

Tip: Use the open attribute on <details> if you want the widget to start expanded.

Custom button toggle