Progressive Disclosure
Date: 2026-08-17
Showing what’s needed now and deferring the rest. It reduces cognitive load when what’s hidden is genuinely secondary — and becomes a dark pattern the moment what’s hidden is something that would change the decision.
Progressive disclosure presents essential information and controls first, revealing advanced or secondary detail on demand.
The whole question is what counts as secondary, and getting that wrong turns a load reduction into concealment — Cognitive Load.
The test
SAFE TO DEFER
detail that refines a decision
already made
→ full ingredient list
→ technical specifications
→ advanced options with sensible
defaults
→ historical order detail
NEVER DEFER
anything that could CHANGE the
decision
→ price, and total price
→ delivery cost and date
→ stock availability
→ returns terms
→ subscription commitment
→ what happens next
“Would knowing this change whether they proceed?” If yes, it isn’t secondary, and hiding it is deferral of a problem rather than reduction of effort — Trust Signals.
The patterns
ACCORDION sections collapsed,
expand one at a time
→ good for reference
content
TABS parallel content, one
visible
→ hides content from
search-in-page and
often from crawlers
"SHOW MORE" truncated text
→ cheap, effective
STEPPED FLOW one stage at a time
— Form Design
DISCLOSURE a single expandable
TRIANGLE detail
DEFAULTS + advanced settings behind
ADVANCED a link
See: Form Design
Tabs have a specific cost worth knowing: content in an unopened tab is not found by browser find-in-page, is frequently missed entirely, and may be treated as lower priority by search engines. Reviews behind a tab is the classic version — a primary decision input, hidden.
Staged disclosure in checkout
The legitimate high-value application:
STEP 1 delivery address
STEP 2 delivery method + COST SHOWN
STEP 3 payment
That’s fine — provided the total including delivery is visible from the basket onwards. Staging the entry of information is a load reduction; staging the revelation of cost is drip pricing — Checkout Design.
Where it’s misapplied
- Hiding price to increase clicks. “See price in basket” is not disclosure, it’s obstruction
- Minimalism as the goal. Hiding things to look clean, then adding a “show more” nobody clicks
- Too many levels. Content three expansions deep is content nobody reads
- Hiding for mobile only, so mobile users get a materially different product page
- Accordion-everything. A page of eleven collapsed sections is a table of contents pretending to be a page
The signal that it’s wrong
IN DATA
high open rate on a collapsed
section
→ it wasn't secondary. Promote it
zero open rate
→ either genuinely unneeded, or
the label doesn't say what's
inside
IN RESEARCH
hunting through sections for
something they expected to see
— Usability Testing
See: Usability Testing
A high open rate is a promotion signal, and it’s directly measurable — if 60% of people expand “Delivery & Returns”, it belongs on the page.
Accessibility
NATIVE FIRST <details>/<summary>
works with no JS
STATE EXPOSED aria-expanded on the
control
CONTROLS LINKED aria-controls to the
region
FOCUS ORDER revealed content follows
its trigger
— Focus Management
FIND-IN-PAGE consider whether hidden
content should be
searchable
See: Focus Management
Use <details> and <summary> where they fit — they carry the semantics, keyboard behaviour and screen-reader announcements without any code — Semantic HTML.