Expand/Collapse Widget Demo

Example 1: Basic expand/collapse
What is an expand/collapse widget?

An expand/collapse widget lets you reveal additional information on demand. This example uses the native HTML details/summary elements.

  • Click the summary line to toggle visibility.
  • The caret indicator rotates to show the current state.
  • This approach is keyboard accessible and screen-reader friendly.
Example 2: Starts expanded
Section initially expanded

This section is open by default using the "open" attribute. Remove it to start collapsed.

Using the open attribute:

<details class="details" open>...</details>
Example 3: Programmatic control
Toggle with a button

You can also control a details widget with JavaScript. Use the button below to toggle this section.

Example 4: Nested widgets
Parent section

This parent section contains another expand/collapse widget nested inside. Each widget is independently controllable.

Nested widget follows the same pattern and is wrapped with its own "example" container.

Nested: Child widget
Child section

Nested content lives here. It can be expanded and collapsed separately from the parent section.