Expand / Collapse Widget Demo

This page demonstrates two expand/collapse widgets wrapped in an .example container. The first widget uses a custom panel with a dedicated .details class (and an additional custom class to scope styling). The second widget uses the native HTML details/summary element.

This is the controlled content for the first widget. It expands and collapses when you click the button above.

  • Accessible with ARIA attributes
  • Animated expand/collapse via CSS height
  • Content can include text, images, and more
Native expand/collapse widget (details/summary)

This widget uses the native details/summary elements. It provides built-in accessibility and keyboard support without extra JavaScript.