Expand/Collapse Widgets

Two approaches: native <details>/<summary> and a button-controlled disclosure with animation.

Native details/summary
What is an expand/collapse widget?

An expand/collapse widget lets you reveal or hide content on demand. The native HTML pattern uses the <details> element with a <summary> for the clickable header.

  • Keyboard accessible by default
  • Works without JavaScript
  • Can be styled for custom look and feel

Tip: The element gets an open attribute when expanded, which you can target in CSS—e.g., details[open] summary.

Button-controlled disclosure
Press the button to reveal more information

Note: In the second example, the container for controlled content uses the details class and is toggled via a button with aria-expanded and aria-controls.