Progressive Disclosure
渐进式呈现
Show only what the user needs by default, and hide the rest behind a "Show more" affordance.
Live Demo
Actually clickable- Frame · Natural oak × 1¥68
- Photo printing · 20 prints¥45
- Coupon−¥15
What you just saw:An order detail page that shows only "Total $128" plus a "Show details" link, revealing line items on click; a permission request that says "Needs camera access" instead of dumping a full screen of explanation.
What it actually is
Progressive disclosure is a delayed-gratification strategy: give the 80% of information the user needs first and let them decide whether to see the other 20%. It solves choice overload — when there are too many options, users freeze.
Anatomy · What it's made of
Summary摘要
The 80% that is visible by default
Trigger展开触发
"Show more ›"
Detail详情
The hidden 20%
State状态记忆
Remembers the last choice
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There is a lot of information but most users only need a slice | Yes |
| Advanced options would scare off beginners | Yes |
| You can tier the experience by user sophistication | Yes |
| Missing information would lead to misuse | No |
| The hidden content happens to be safety-related | No |
Hiding something like "Delete" behind a "More" menu is a disaster.
Do not use it to conceal price, fees, or risk — users must see those.
Similar Patterns
Don't mix these upProgressive DisclosureCurrent
渐进式呈现
Show only what the user needs by default, and hide the rest behind a "Show more" affordance.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
In one line:Show only what the user needs by default, and hide the rest behind a "Show more" affordance.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
Collapsible
单项折叠
Only one section stays open at a time — open a new one and the previous one closes itself.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Tooltip
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
How to tell AI
Three levels of promptAdd the component name and specifics
An order detail view shows only the total and a "View details" link by default; expanding it reveals one row per line item. Remember the user's expansion choice from last time.
Don't just say this to AI
Bad → BetterDon't say this to AI
Only show part of it, collapse the rest.
Say this instead
Implement Progressive Disclosure: show a summary plus a "View details" text button with aria-expanded by default, animate expansion with a 0fr to 1fr transition, and store the user's expansion choice in localStorage so it persists — but never hide pricing, risk, or safety information.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.