Expand/Collapse Widget Demonstration

These examples showcase different ways to present collapsible content. Each widget is wrapped in an example container, and the interactive panel uses the details class for consistent styling.

1. Classic Toggle With Summary

What is an expand/collapse widget?

An expand/collapse widget allows users to reveal or hide additional information on demand. It keeps interfaces clean by displaying only the most relevant content upfront.

  • Compact: Reduces visual clutter.
  • Accessible: Keyboard and screen-reader friendly when built with native HTML elements.
  • Progressive: Degrades gracefully if scripting is unavailable.

2. Default-Open FAQ Entry

When should I preload content inside a collapsed panel?

Preloading is useful when:

  1. The content is frequently accessed and should be immediately available.
  2. You're building offline-first experiences that cache resources ahead of time.
  3. Delayed loading could interrupt an essential task.

Otherwise, lazy-loading the content when the panel opens can improve the initial load performance.

3. Programmatically Controlled Panels

The buttons below manipulate multiple expandable sections via JavaScript while retaining the native semantics of the <details> element.

Current open panels: 0
Accessibility considerations

Ensure the summary text is descriptive, maintain keyboard operability, and avoid hiding critical information exclusively behind an interaction.

Theming a disclosure pattern

Use CSS custom properties to create light/dark modes. Apply transitions to soften state changes, but respect prefers-reduced-motion preferences where possible.

Runtime configuration

Programmatic control can be achieved by toggling the open attribute on the details element. This maintains semantic correctness while enabling more advanced UI flows.