Expand/Collapse Widget Demo

Example 1: Button-controlled content

Tip: Click the header button to toggle the panel.

Example 2: Native details/summary

More information

This example uses the native <details> element.

  • Built-in toggle behavior and accessibility.
  • The controlled content container still uses the details class.
Tip: Click the summary row to expand/collapse.