{"slug":"collapsible-section","meta":{"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.\n\n- Each section has a heading that is a real button — clickable across its\n  whole width, focusable, operable with Enter and Space, and carrying an\n  expanded or collapsed state for screen readers.\n- Show a chevron that points down when open and right when closed, and put a\n  count or a one-line summary on the heading so a closed section still tells\n  you what is inside.\n- Sections open and close independently. Do not build an accordion that closes\n  one section when another opens unless the content genuinely conflicts.\n- Choose the default open set deliberately: what most people need most of the\n  time, and nothing else.\n- Remember each person's open and closed state and restore it on their next\n  visit.\n- When a section contains something needing attention, show that on the\n  heading — a count, a marker — so collapsing never hides urgency.\n- Never put an unsaved form or a validation error inside a collapsed section\n  without surfacing it on the heading.\n","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."}]},"body":"## Anatomy\n\n```\n▾ Details                                          ← open\n    Issued 14 Jul · Due 25 Aug · Terms 30 days\n▸ Line items (7) · $8,400                          ← closed, but informative\n▸ History (12 events)\n▸ Attachments (0)\n▾ Notes  ⚠ 1 unresolved                            ← urgency shown on the heading\n    Client disputes the labour hours on level 3.\n```\n\n- **The heading is a button**, not a clickable `div`. Keyboard and screen-reader\n  support are part of the pattern, not an extra.\n- **A closed section still says something.** A count, a total, a summary. A\n  heading alone makes people open every section to find out.\n- **Urgency lives on the heading**, because collapsed is hidden and hidden\n  things do not get acted on.\n- **State is remembered**, or every visit begins with the same re-collapsing.\n\n## Why it works\n\nIt is the only disclosure pattern that lets the *reader* choose the combination.\nTabs decide that you see one section; a fixed layout decides you see all of\nthem. Collapsible sections let a salesperson keep Details and Notes open while\nfinance keeps Line items and History — over the same page, with no configuration.\n\nBecause the headings stay visible, the record's full shape is always readable\neven when almost everything is closed. That is what separates this from simply\nhiding things: the doors are all in view, and each one is labelled with what is\nbehind it.\n\n## The summary is the whole design\n\nA collapsed section is only useful if its heading carries enough to decide\nwhether to open it. \"Line items\" makes people open it. \"Line items (7) · $8,400\"\noften answers the question outright.\n\nTreat the closed-state summary as the primary design work, not the open content.\nIt is what people read most often, and it is what determines whether the section\ngets opened at all.\n\n## Getting it wrong\n\n- **A bare heading with no count**, so every section must be opened to be\n  understood.\n- **An accordion by default.** Closing one section to open another is a\n  constraint that should be chosen deliberately, and rarely should be.\n- **Everything collapsed on first load**, which turns the page into a menu and\n  hides that there is any content at all.\n- **Forgetting the state**, so the person re-opens the same three sections every\n  visit.\n- **A validation error inside a closed section.** The form refuses to submit and\n  nothing visible says why — one of the most frustrating bugs in this pattern.\n- **`div` headings**, unreachable by keyboard.\n\n## Exemplars\n\n**Notion's toggle blocks** demonstrate the reader-controlled model — the same\npage is a summary or a full document depending on who is reading it.\n\n**Browser developer tools** are collapsible sections at scale, and show why\nstate persistence matters: nobody would tolerate re-opening the same panels on\nevery page load.\n\n**Stripe's payment detail** keeps the common sections open and the rare ones\nclosed with counts, which is the default-set judgment done well.\n\nThe extractable rule: **design the closed state first.** If the heading does not\nanswer \"is what I want in here\", the section will be opened every time and you\nhave added a click to everything.\n"}