Expand/Collapse Widgets

Examples using native details/summary and custom JavaScript-controlled panels.

Native details/summary

A semantic, accessible expand/collapse using the HTML details element.

What is an expand/collapse widget?

An expand/collapse widget lets you reveal or hide additional information. The native HTML element for this is <details> with a <summary> label.

Tip: Use it for FAQs, code samples, or progressive disclosure.
This one starts expanded
  • It uses the open attribute.
  • Click the summary line to collapse or expand.
  • Keyboard users can focus and toggle with Space/Enter.
Custom button-controlled panel

A button toggles a content region. The container for controlled content uses the details class.

Accordion (only one open at a time)

An accordion built with multiple details elements. Opening one closes the others.

Section A

Content for Section A. Accords restrict to a single open panel.

Section B

Content for Section B with some extra notes.

  • Declarative HTML structure
  • No external libraries
Section C

Content for Section C. Click any summary to toggle.