Expand / Collapse Widgets

Widget 1: Basic details element

This widget uses the native details and summary elements to show and hide content. Click the header to expand or collapse the panel.

  • Accessible with built-in keyboard and mouse interaction
  • Fully semantic: the disclosure state is exposed by the details element
Widget 2: Expanded by default

The panel starts open because the details element has the open attribute set. You can close it by clicking the header.