Expand/Collapse Widget Demonstrations

Example 1 — Button-controlled panel (ARIA)

Tip: Press Tab then Enter / Space.

Example 2 — Animated expand/collapse

Implementation uses scrollHeight and a height transition.

Example 3 — Native `<details>` / `<summary>`

Show details (native)

This uses the built-in HTML expand/collapse behavior. It works without JavaScript.

Styling is customized, but the interaction remains native.

Native widgets automatically support keyboard and accessibility semantics.