Expand/collapse widget (disclosure) examples
These examples use buttons to toggle related content regions. Each widget is wrapped in a div with class example, and each controlled content container uses the details class.
Examples
Example 1: “More details” panel
Use the button to show or hide supporting information.
This is the expandable content. It stays out of the tab order while hidden.
- Keyboard: Tab to the button, press Enter or Space to toggle.
- Assistive tech: the button exposes the expanded/collapsed state.
Tip: The button label updates to reflect the current action.
Example 2: “Shipping and returns” panel
Disclosure content can include links and other interactive controls.
Shipping: Orders typically ship within 2 business days.
Returns: You can request a return within 30 days.
Link targets stay reachable when the panel is expanded.
Notes
These widgets use a <button> with aria-expanded and aria-controls. The controlled content uses the hidden attribute when collapsed, so it is not visible and not focusable.