Expand/Collapse Widget Demo

An expand/collapse widget (also known as a disclosure widget) allows users to show or hide a section of content. It consists of a button that toggles visibility and a content region that appears or disappears accordingly.

This pattern is useful for reducing visual clutter while keeping content easily accessible on demand.

To create an accessible expand/collapse widget, follow these guidelines:

• Use a <button> element as the toggle control.
• Set aria-expanded on the button to indicate the current state (true or false).
• Use aria-controls to associate the button with the content region.
• Use the hidden attribute to hide the content when collapsed.
• Mark the content region with role="region" and aria-labelledby referencing the button.
• Ensure the button is keyboard operable and has a visible focus indicator.

Yes. Simply set aria-expanded="true" on the button and remove the hidden attribute from the content region on page load. The widget below this one is open by default as an example.

This content is visible when the page loads. You can collapse it by activating the button above. This demonstrates that the widget works in both directions — expanding hidden content and collapsing visible content.