Expand / Collapse Widget — Accessible Examples

Summary: This content is initially collapsed. It becomes visible when the button is activated.

Tips for accessibility:

• Use aria-expanded on the controlling element (the button).
• Use aria-controls to reference the controlled container.
• The controlled container has role="region" and aria-labelledby to announce its relationship.

This demonstration uses native buttons for accessible keyboard interaction.

Expanded example: This instance starts expanded to show the open state. You can collapse it using the same button.

Content here could be long form, additional controls, or any other information you want to reveal on demand.

The content container has the required class "details".