Expand/Collapse Widgets

Examples using native HTML and a custom button with a shared “details” content container.

Native HTML Details Element

Uses the built-in

and elements, with a class on the container.

About this example

The native widget provides accessible expand/collapse behavior without JavaScript.

  • Keyboard accessible by default
  • Works across modern browsers
  • Can be styled via CSS

Tip: Use the [open] attribute to set the initial state if desired.

Custom Button-Controlled Section

A simple button toggles visibility of a content region that has a details class.

Multiple Custom Sections

Demonstrates multiple independent expand/collapse regions.