Expand/Collapse Widgets
Examples of native and custom disclosure controls. Each widget is contained in a div with the class “example”, and the controlled content is inside an element with the class “details”.
Native details disclosure
What is an expand/collapse widget?
An expand/collapse widget lets users reveal or hide additional content on demand, reducing visual clutter. The native HTML element <details> provides this behavior out of the box with accessible keyboard support.
- Click the summary to toggle visibility.
- Use the keyboard to focus and activate the summary.
- The content below is part of the same container with class
details.
<details class="details">
<summary>Heading</summary>
Content that can be expanded/collapsed
</details>Custom button-controlled disclosure
This custom widget uses a button with aria-expanded and aria-controls to toggle a content container with the class details. It’s useful when you want greater control over animations, state, or styling beyond what the native <details> element offers.
Features:
- Accessible ARIA attributes and keyboard support.
- Button label updates between “Show details” and “Hide details”.
- Press Escape while focused inside the region to collapse and return focus to the trigger.
Example content:
<button aria-controls="customDetails1" aria-expanded="false">Show details</button>
<div id="customDetails1" class="details" hidden>...</div>Multiple sections (accordion-like)
Section A content. This container uses the class details and can be independently toggled.
Section B content. You can open multiple sections at once or modify the script below to enforce a single-open rule.
Section C content. Press Escape while focused here to collapse and return focus to its trigger.