Expand / Collapse Widget — Examples

Simple details panel with a short description.

An example that starts opened and contains longer content.

Expanded panel: This panel starts open. Use it to show longer informational content. The script measures the content height to animate open/close smoothly without using fixed max-height values.

It is common to include lists, paragraphs, or other interactive content inside a details region. Ensure interactive controls inside remain reachable and focusable when the region is open.