Inline expansion
Content or controls revealed exactly where they belong, without adding another interface layer.
Definition
Definition
Inline expansion reveals content exactly where it lives on the page, without opening any new layer or moving the user anywhere.
Problem it solves
Problem it solves
It lets someone go deeper into one part of the page without leaving it. There's no interruption and no context switch — just more of the same page, made visible on demand.
When to use it
When to use it
- Progressive disclosure
- Inline field editing
- Advanced options and contextual details
When not to use it
When not to use it
- The revealed content disrupts the whole layout
- The task needs isolation or multiple steps
Example
Example
- Show more details
- Edit name in place
- Reveal advanced options
See the technical example
<button aria-expanded={open} aria-controls="advanced">
Advanced options
</button>
<section id="advanced" hidden={!open}>
{/* related controls */}
</section>Counter-example
Counter-example
Expanding a whole multi-step onboarding flow inline inside a settings row is a common overreach. A dedicated page is the better fit here — it can structure the steps, keep progress visible, and let the user come back to finish later, none of which an inline block can offer.
Questions to ask yourself
Questions to ask yourself
- Does the revealed content stay closely tied to what triggered it?
- Can it stay open without disrupting anything else on the page?
- Is it short enough to not need its own navigation?
- Would isolating it in a drawer or page actually help the user?
Related patterns