Expand · Collapse

Three variations of lightweight expand/collapse widgets crafted with the native <details> element, progressive enhancement, and utility styles.

Basic Disclosure

The native <details> element provides semantic, accessible expand/collapse behavior out of the box.

What is an expand/collapse widget?

An expand/collapse widget progressively discloses supplementary information. It keeps dense content compact until requested.

  • Improves scannability without sacrificing depth.
  • Accessible via keyboard and assistive technologies.
  • Enhances mobile experience by saving vertical space.

Programmatic Control

Use JavaScript to synchronize external controls with the same disclosure container.

Latest release highlights

Version 4.2 bundles performance refinements and quality-of-life improvements. Highlights include:

  • ⚡ Faster hydration — up to 18% quicker SSR mounting in modern browsers.
  • 🧠 Smarter caching via adaptive revalidation heuristics.
  • 🛠️ New CLI flag --dry-run for safer deployment previews.

Read the full changelog in the documentation for a line-by-line breakdown of commits and migration steps.

Accordion Mode

Ensure that only one panel is open at a time by listening for the toggle event and closing siblings.

Design principles

Lead with clarity, prioritize content, and respect users’ expectations. Declare hierarchy visually and semantically.

Interaction patterns

Predictable behavior, generous touch targets, and motion that reinforces—not distracts from—state changes.

Accessibility guardrails
  • Expose toggle state via the native open attribute.
  • Ensure summary text describes the revealed region.
  • Preserve keyboard operability and focus outlines.