---
title: Collapsible Section
slug: collapsible-section
kind: pattern
summary: A named section that folds away, keeping its heading and a count visible — disclosure that lets someone open several sections at once, unlike tabs.
problem: >-
  A record page has eight sections and a person needs two of them. Tabs would
  force them to switch back and forth; showing everything means scrolling past
  six sections they do not want. Neither respects that the useful pair is
  different for different people.
family: [orient, inspect, scan]
data_shape: [record]
principles: [progressive-disclosure, orientation]
interaction: [disclosure]
density: medium
complexity: low
status: stable
visibility: public
use_when:
  - Someone may want several sections open at once, in a combination you cannot predict.
  - Sections vary a lot in length, so a fixed layout wastes space.
  - Most sections are consulted occasionally rather than every visit.
avoid_when:
  - There are two or three short sections. Just show them.
  - Only one section is ever relevant at a time and they are large — use tabs.
  - The content is urgent. Collapsed is still hidden, and nobody opens what they do not know to look for.
alternatives:
  - slug: tabs
    when: Only one section is wanted at a time, each is substantial, and you want it linkable.
  - slug: master-detail-drawer
    when: The sections are really separate records rather than parts of one.
ask_leo: |
  Make these sections collapsible.

  - Each section has a heading that is a real button — clickable across its
    whole width, focusable, operable with Enter and Space, and carrying an
    expanded or collapsed state for screen readers.
  - Show a chevron that points down when open and right when closed, and put a
    count or a one-line summary on the heading so a closed section still tells
    you what is inside.
  - Sections open and close independently. Do not build an accordion that closes
    one section when another opens unless the content genuinely conflicts.
  - Choose the default open set deliberately: what most people need most of the
    time, and nothing else.
  - Remember each person's open and closed state and restore it on their next
    visit.
  - When a section contains something needing attention, show that on the
    heading — a count, a marker — so collapsing never hides urgency.
  - Never put an unsaved form or a validation error inside a collapsed section
    without surfacing it on the heading.
related:
  - title: Progressive Disclosure for Dense Detail Pages
    url: /cookbook/progressive-disclosure-detail-page
    summary: The implementation guide for layering a dense record page.
  - title: Tabs
    url: /patterns/tabs
    summary: The sibling — one section at a time, linkable, at the cost of seeing two.
---

## Anatomy

```
▾ Details                                          ← open
    Issued 14 Jul · Due 25 Aug · Terms 30 days
▸ Line items (7) · $8,400                          ← closed, but informative
▸ History (12 events)
▸ Attachments (0)
▾ Notes  ⚠ 1 unresolved                            ← urgency shown on the heading
    Client disputes the labour hours on level 3.
```

- **The heading is a button**, not a clickable `div`. Keyboard and screen-reader
  support are part of the pattern, not an extra.
- **A closed section still says something.** A count, a total, a summary. A
  heading alone makes people open every section to find out.
- **Urgency lives on the heading**, because collapsed is hidden and hidden
  things do not get acted on.
- **State is remembered**, or every visit begins with the same re-collapsing.

## Why it works

It is the only disclosure pattern that lets the *reader* choose the combination.
Tabs decide that you see one section; a fixed layout decides you see all of
them. Collapsible sections let a salesperson keep Details and Notes open while
finance keeps Line items and History — over the same page, with no configuration.

Because the headings stay visible, the record's full shape is always readable
even when almost everything is closed. That is what separates this from simply
hiding things: the doors are all in view, and each one is labelled with what is
behind it.

## The summary is the whole design

A collapsed section is only useful if its heading carries enough to decide
whether to open it. "Line items" makes people open it. "Line items (7) · $8,400"
often answers the question outright.

Treat the closed-state summary as the primary design work, not the open content.
It is what people read most often, and it is what determines whether the section
gets opened at all.

## Getting it wrong

- **A bare heading with no count**, so every section must be opened to be
  understood.
- **An accordion by default.** Closing one section to open another is a
  constraint that should be chosen deliberately, and rarely should be.
- **Everything collapsed on first load**, which turns the page into a menu and
  hides that there is any content at all.
- **Forgetting the state**, so the person re-opens the same three sections every
  visit.
- **A validation error inside a closed section.** The form refuses to submit and
  nothing visible says why — one of the most frustrating bugs in this pattern.
- **`div` headings**, unreachable by keyboard.

## Exemplars

**Notion's toggle blocks** demonstrate the reader-controlled model — the same
page is a summary or a full document depending on who is reading it.

**Browser developer tools** are collapsible sections at scale, and show why
state persistence matters: nobody would tolerate re-opening the same panels on
every page load.

**Stripe's payment detail** keeps the common sections open and the rare ones
closed with counts, which is the default-set judgment done well.

The extractable rule: **design the closed state first.** If the heading does not
answer "is what I want in here", the section will be opened every time and you
have added a click to everything.