Expand/Collapse Widget Examples

Three variations of expand/collapse: native details/summary, a basic custom toggle, and an animated custom toggle. Each widget is wrapped in a div with class "example". The controlled content container uses class "details".

Native details/summary

Uses the built-in HTML details element for accessibility and minimal scripting.

Product specifications
  • Material: Recycled aluminum
  • Dimensions: 230 × 150 × 12 mm
  • Weight: 420 g
  • Warranty: 2 years

Note: The details element provides keyboard and screen reader support natively.

Custom button-controlled

A button toggles a content container using the hidden attribute and ARIA states.

Custom button-controlled with animation

Animated expansion using CSS grid row transitions. The content container remains in the DOM to allow smooth animation.