Expand/Collapse Widget Examples

1) Native details: Basic disclosure

What is an expand/collapse widget?

An expand/collapse widget lets you hide or reveal additional content. Using the native details and summary elements gives you accessibility and keyboard support out of the box.

This content is inside the container with class details, and it becomes visible when the summary is activated.

2) Native details: Default open

Show me content by default

This widget is open initially thanks to the open attribute on details.

Click the summary again to collapse it.

3) Native details: Nested disclosures

Parent section

This is the parent section. It contains a nested disclosure for more granular control.

Nested child section

Nested content lives here. Each details acts independently and has the required details class.

4) Button-controlled panel (ARIA + JS)

5) Multiple independent JS panels