Expand/Collapse Widget Examples

Each widget is wrapped with an element that has the “example” class, and the controlled content container has the “details” class.

Example 1: Native HTML details/summary

Uses the built-in <details> element. The container has a details class.

This widget uses the native HTML <details> element, which provides built-in keyboard and screen reader support.

  • Click or press Enter/Space on the summary to toggle.
  • State is reflected with the open attribute.
  • Content container is styled and grouped inside the details element.

Example 2: Button-controlled region (JavaScript)

A button toggles a content region. The container for the controlled content has a details class.

Example 3: CSS-driven checkbox toggle

A hidden checkbox and label toggle the content using CSS. The container for the controlled content has a details class.

No JavaScript is required to toggle this region. CSS sibling selectors control visibility.

  • The label toggles the checkbox, which drives visibility via CSS.
  • Chevron updates using CSS, reflecting the checkbox state.
  • Content container is a div with the details class.