Expand / Collapse Widget Demo

Overview

This is a simple expand/collapse widget using native details/summary elements. The content container has the "details" class.

You can place any content here: text, lists, images, or other HTML blocks.

Active Items
  • First active item
  • Second active item
  • Third active item
Controlled Content via Script

This widget demonstrates programmatic control of the expand/collapse state. Use the buttons below to open or close this panel.

Open states can be toggled with JavaScript by accessing the details element.

Panel is closed