Skip to content
界面图谱Interface Atlas
☰
中文
PatternsContent / Interaction

Progressive Disclosure

渐进式披露

Aliases:Progressive Disclosure渐进式披露逐步展开分步显示折叠收起详情点开看更多显示高级选项

What is it

Layer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.

Interactive playground

Try it. Make an informed choice.

Loading lab…

✓ When to use

  • Advanced, low-frequency options on settings pages
  • Optional form fields needed only in specific cases
  • Summaries that can stand alone before the full text

✕ When not to use

  • Frequently used features — hiding them hurts discoverability
  • Users must compare all options side by side
  • Critical-path steps — hiding them blocks the task

Variants

Collapsible section

折叠展开

A collapsed panel holds secondary details, arrow shows state

Excerpt + show more

摘要 + 显示更多

Show an excerpt first; expand to the full list or text on demand

Stepwise reveal

分步呈现

Wizard-style screens revealing one thing at a time

Implementation

max-height transitiongrid-template-rowsaria-expandedrotate

Wire the trigger with aria-expanded and aria-controls; transition height via max-height or grid-template-rows: 0fr/1fr. Keep hidden fields unrendered or display:none when collapsed so they skip validation. Rotate the chevron with state and respect prefers-reduced-motion.

Related concepts

Accordion手风琴

A vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.

ComponentsUsed with
Form Validation表单校验

Checks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.

PatternsSimilar
Onboarding Tour新手引导

Introduces an interface with an overlay, a spotlight cutout and step bubbles: each step reveals one key area and explains it in place, paced by prev/next controls and a step indicator, always skippable. The explanation lives where the feature happens instead of making users hunt for docs.

PatternsSimilar
Drawer抽屉

A panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.

ComponentsUsed with
Tooltip工具提示

A small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.

ComponentsUsed with

Sources

Markdown for agents · JSON