Expand/Collapse Widget Demo

Each widget is wrapped in a div.example. The controlled content lives inside a div.details.

Account settings Click to reveal the controlled content

This section is controlled by the button above. It uses aria-expanded and aria-controls.

Email notifications Two-factor auth Sessions Privacy
FAQ Starts expanded; supports keyboard interaction

Q: How is the expand/collapse animated?

A: JavaScript measures the content height and sets max-height on .details.

  • Space/Enter on the button toggles it.
  • prefers-reduced-motion disables transitions.