Expand/Collapse Widgets

Two approaches: a native Details element and a custom button that toggles content. Each widget is wrapped in an element with class example, and the controlled content uses the details class.

Native Details Element

This section uses the built-in HTML <details> element.

The native details widget provides accessible expand/collapse behavior without JavaScript. You can nest any content inside it.

  • Keyboard support via Space and Enter
  • Automatic accessibility semantics
  • No custom scripting required

Try toggling the summary above to expand or collapse.

Custom Button-Controlled Content