Expand/Collapse Widgets
Three approaches: native details/summary, a JavaScript-driven disclosure button, and a CSS-only checkbox.
Native details/summary
More information
This widget uses the HTML details/summary element. The content below is shown when the disclosure is open.
- Keyboard accessible by default.
- Built-in toggle behavior.
- Can be styled for a consistent look.
<details> <summary>More information</summary> <div class="details">Controlled content</div> </details>
JavaScript-driven disclosure button
This widget uses a button with aria-expanded and aria-controls to manage visibility of the controlled content.
- The button toggles the hidden attribute on the container.
- ARIA reflects the current expanded state for assistive technologies.
- The label updates to Show more / Show less.
<button aria-expanded="false" aria-controls="ex2-content">Show more</button> <div id="ex2-content" class="details" hidden>Controlled content</div>
CSS-only checkbox
This widget does not require JavaScript. A visually hidden checkbox controls CSS that expands or collapses the content.
Because it uses a real form control with an associated label, it is operable via keyboard.
#ex3-toggle:checked ~ .details {
max-height: 1000px;
opacity: 1;
}