Expand / Collapse Widget Examples

This content is hidden by default. Use the button to expand and reveal more information. The container uses a class named "details" (not the native <details> element) so it can be styled and scripted consistently.

The button updates aria-expanded and the panel updates aria-hidden for accessibility.

This panel starts expanded to demonstrate the expanded initial state. Scripts will measure and set a height to allow a smooth open animation if you toggle it.

• Accessible: aria-expanded on the button
• Accessible: aria-hidden on the details container
• Animated: smooth transition of max-height

Below is a nested expand/collapse inside the parent details to show composition: