Expand/Collapse Widgets

Three approaches: native HTML, ARIA button-controlled, and CSS-only.

Native HTML Details/Summary

▶ What is an expand/collapse widget?

An expand/collapse widget shows or hides additional information when activated. This example uses the built-in HTML <details> element paired with a <summary> trigger.

  • Click the summary to toggle visibility.
  • Works without JavaScript.
  • Provides accessible semantics by default.
<details class="details">
  <summary>Title</summary>
  <p>Hidden content.</p>
</details>

Button with ARIA Controls (JavaScript)

This panel is controlled by a button using ARIA attributes. The button updates its aria-expanded state, and the panel toggles a CSS class to animate open/close.

  • aria-controls references the panel.
  • aria-expanded reflects the current state.
  • CSS animates the panel height.
<button aria-expanded="false" aria-controls="panel">Toggle</button>
<div id="panel" class="details collapsible">...</div>

CSS-Only Checkbox Toggle

No JavaScript needed: the label toggles the checkbox, and CSS targets the sibling (the details container) to expand/collapse.

  1. Use a visually styled label as the trigger.
  2. Checked state drives the CSS.
  3. Keep the content accessible and focusable.
.checkbox-toggle:checked ~ .details { max-height: 300px; }