Expand/Collapse Widgets

Examples of interactive panels you can toggle open and closed.

Native details/summary

What is an expand/collapse widget?

An expand/collapse widget reveals additional content on demand, helping reduce visual clutter. The native details element provides this behavior without custom JavaScript.

  • Keyboard and screen reader support is built in.
  • Use the summary element for the toggle control.
  • Place any expanded content after the summary.

Button-controlled panel

FAQ item