Expand/Collapse Widget Examples

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

Basic expand/collapse

A simple widget using a summary to show or hide content.

What is an expand/collapse widget?

An expand/collapse widget allows users to toggle the visibility of additional information.

  • Click the summary to reveal hidden content.
  • Click again to collapse it.
  • The container for the controlled content has the class details.

Initially open section

This widget starts expanded using the open state.

Click to collapse or expand

This section is open by default. The open state can be toggled by clicking the summary.

Use this pattern when content is likely to be relevant right away.

Accordion (one section open at a time)

Opening one section will close the others within this widget.

Section 1: Introduction

This section provides an overview of the accordion pattern. It keeps interfaces tidy by showing one pane at a time.

Section 2: Details

Accordions are helpful for lengthy content. They reduce scrolling by segmenting information into manageable parts.

Section 3: Tips
  • Keep summaries short and descriptive.
  • Avoid nesting too many levels.
  • Consider keyboard and screen reader accessibility.

External controls

Use buttons to open or close sections programmatically.

First section

This section can be toggled with the "Toggle first" button above, or by clicking its summary.

Second section

This section is affected by the Expand all and Collapse all controls. Try them to change both sections at once.