Collapsible Section | LlamaPress Pattern Catalog
LlamaPress
Sign in Upload
Orient
Pattern

Collapsible Section

A named section that folds away, keeping its heading and a count visible — disclosure that lets someone open several sections at once, unlike tabs.

Orient Inspect Scan & Understand

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.

Live demo — try it Open full screen
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.

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.

Instead of this, consider

Same problem, different trade-off. Pick on the condition, not on taste.

Tabs
When: Only one section is wanted at a time, each is substantial, and you want it linkable.
Master–Detail Drawer
When: The sections are really separate records rather than parts of one.

Ask Leo for this

Paste this into your Leo chat. It describes the behaviour, not the code, so Leo can fit it to your data.

Prompt 
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

Cookbook recipe
Progressive Disclosure for Dense Detail Pages
The implementation guide for layering a dense record page.
Pattern
Tabs
The sibling — one section at a time, linkable, at the cost of seeing two.