Expand/Collapse Widget Demo

Each widget is wrapped in an .example container. The collapsible content uses a container with the .details class.

Example 1: Simple Text

This is a straightforward expand/collapse widget. Click the button to reveal more text.

It demonstrates the basic pattern: a control button and a content container that shows or hides.

Example 2: List Content

Here is a small list that becomes visible when expanded:

  • First item
  • Second item
  • Third item

Example 3: Embedded Code

Inline code sample shown when expanded:

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("World"));