Expand/Collapse Widget Demo

Wrap each widget with a div that has an "example" class. The container for controlled content uses the "details" class.

Example 1: Simple toggle

This is a simple expand/collapse widget. The content is contained within a container that has the class "details". The button above toggles its visibility with a smooth transition.

  • Accessible with ARIA attributes
  • Animated content reveal

Example 2: Nested toggle

This demonstrates multiple widgets on the same page. Each widget controls its own "details" container independently.

You can expand or collapse this section without affecting the others.

Example 3: Pre-expanded

This example starts expanded to demonstrate the transition from visible to hidden state. Click the button to collapse.