Expand/Collapse Widget Examples

This is a basic expand/collapse panel. It uses a button with aria-expanded and aria-controls for accessibility, and the controlled container has the class "details".

Tip: Use the Enter or Space key when the button is focused to toggle.

This panel is opened by default. The script keeps the expanded state in sync with aria-expanded and aria-hidden so assistive technologies can understand the state.

The parent panel contains another expand/collapse widget inside it.

This is the nested panel. Nested toggles are supported independently.