Expand / Collapse Widgets

Basic details

A simple expand/collapse region controlled by a button

This is some content that can be revealed and hidden. Content is wrapped in a container that has the class "details".

Tip: Press the button again (or use Enter/Space when focused) to collapse.

Initially expanded

Demonstrates an open widget by default

This panel starts open. The script will keep visual transitions smooth while toggling.

Item one
Item two
Item three

Control multiple regions

A single control can open or close multiple .details containers

Section A: Shared toggle example. Both regions will expand/collapse together.

Section B: This demonstrates multiple targets for a single controller. Both have the "details" class.

Each widget's expanded content is inside an element with class="details", and each widget is wrapped by a div.example.