Inline expansion
It reveals more content directly in the page, exactly where the user needs it.
What inline expansion reveals in place
Inline expansion reveals extra content right where it belongs, without opening another layer or sending the user somewhere else.
The real job
Show more without leaving the page
It lets someone go one level deeper without leaving the page. There is no interruption and no context switch. Just a little more of the same page, revealed when it actually helps.
Good fit
When the page has room for more detail
- Progressive disclosure
- Inline field editing
- Advanced options and contextual details
Bad fit
When the extra content starts breaking the layout
- The revealed content disrupts the whole layout
- The task needs isolation or multiple steps
In the wild
What stays naturally inline
- 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>Classic trap
Onboarding is not an expandable row
Unfolding a whole onboarding flow inside one settings row is a classic overreach. A dedicated page does the job better: it can structure the steps, keep progress visible, and let people come back later. An inline block cannot fake that.
Before you choose
A few checks before you reveal more
- 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?
You may need…