Expandable Section¶
Interface — instantiates Progressive Disclosure
A user interface element that reveals hidden supporting content when opened.
An Expandable Section is the atomic disclosure widget: a collapsed block — an accordion row, a disclosure triangle, a "read more" — that reveals a single layer of supporting content in place when the user clicks its labeled control, and folds it away again on a second click. Its defining idea is that the content is inert, author-placed reference material sitting on the same page, opened only if and when the user chooses to pull it; nothing is pushed, nothing is validated, nowhere is navigated to. The whole mechanism rides on one thing being right: the label must carry enough scent that a user can decide whether what is inside is worth opening.
Example¶
A recipe website keeps its method list short — one imperative line per step — but hangs a small "Why?" toggle beside each. Under step four, "Rest the dough 30 minutes ▸", the toggle sits collapsed. A confident baker ignores it and keeps moving. A first-timer clicks it and the line unfolds in place: "Resting lets the gluten relax, so the dough rolls out without springing back." The label told them roughly what was inside; they opened only the two or three steps they were unsure about; the page stayed a scannable list rather than a wall of tutorial prose. Close the toggle and the method is compact again.
How it works¶
Content is chunked into a visible layer and one or more hidden layers. Each hidden layer gets a trigger control — the clickable header, triangle, or link — and a label that names what unfolds. On activation, the section expands in place, reflowing the page around it; a second activation collapses it. There is deliberately no destination: unlike a link or a detail pane, the revealed content appears where the trigger sits and disappears back into it. Multiple sections may be independent (any number open) or exclusive (opening one closes the others). Open/closed state can be remembered per page so a returning reader keeps their layout.
Tuning parameters¶
- Default state — collapsed versus first-item-open. Collapsed is the calmest first layer; opening the most-used section by default trades calm for immediacy.
- Label specificity — a descriptive label that carries scent ("Shipping & returns policy") versus a teaser ("Learn more"). Scent lets users choose accurately; teasers force blind clicks.
- Exclusivity — single-open accordion versus free multi-open. Single-open keeps the page short; multi-open lets a reader compare two sections at once.
- Animation — instant toggle versus animated unfold. Animation signals where the content came from; too much of it slows a practiced user.
- State persistence — whether open/closed survives navigation, serving the reader who keeps re-opening the same section.
When it helps, and when it misleads¶
Its strength is compression without loss: it shortens a dense page to a scannable skeleton while keeping every detail exactly one click away, on the same page, in context. It is the cheapest, most familiar way to make depth optional.
Its failure mode is a labeling failure. A section whose label lacks scent — "More", "Details", "Info" — leaves the user unable to tell what is inside, so they either open everything (defeating the compression) or skip the one section that mattered.[n1] The graver misuse is collapsing content the user needs every time, or worse, hiding a mandatory warning, a fee, or an irreversible-action caveat inside a closed accordion — which converts disclosure into concealment. The guarding discipline is twofold: write labels that genuinely predict their contents, and never collapse anything a responsible user must see before acting — critical exceptions belong in the open, or surfaced at the point of action by a different mechanism entirely.
How it implements the components¶
information_layer— the collapsed block and its revealed content are two depth levels of the same page; the section is a layer boundary made concrete.reveal_trigger— the clickable header, triangle, or "read more" is the explicit user gesture that makes the hidden layer visible.depth_label— the toggle's text names what will unfold, giving the user the scent to decide whether to open it.
It does NOT implement critical_detail_exception or progressive_validation_prompt — the surface-a-warning-and-validate behavior of Just-in-Time Help; an expandable section is passive reference content the user elects to open, never a prompt that fires on its own or blocks the next action.
Related¶
- Instantiates: Progressive Disclosure — the section is the archetype's simplest unit: one layer, one trigger, one label, revealed in place.
- Sibling mechanisms: Just-in-Time Help · Summary-Detail View · Advanced Settings Panel · Drill-Down Dashboard · Tiered Decision Support · Staged Onboarding · Progressive Training Module · Wizard or Stepper Workflow
Editorial Notes¶
Form Classification¶
Form family: Interface, Display & Cue
Rationale: Expandable Section operates as a user-facing prompt, display, template, or perceptual cue that shapes attention and action at the point of use because it a user interface element that reveals hidden supporting content when opened.
Independent corroboration: The frozen evidence defines Expandable Section as 'A user interface element that reveals hidden supporting content when opened', so its operative form is Interface, Display & Cue.
Review outcome: Independent reviewer agreement; high confidence.
Origin Attribution¶
Primary origin: Human-Computer Interaction
Origin pattern: Single lineage
Present-day reach: Specialized
Rationale: A disclosure widget that reveals hidden supporting content is a standard user-interface interaction pattern.
Related originating lineages:
- Computer Science & Software Engineering — Web and GUI implementation traditions materially instantiate the stateful control.
Review outcome: Independent reviewer agreement; high confidence.
Notes¶
[n1] Information scent (Pirolli & Card, information foraging theory): users decide whether to pursue hidden content by the cues — labels, snippets, icons — that hint at what it contains. A high-scent label makes an expandable section navigable without opening it; a low-scent one forces guesswork. ↩