Anatomy
- Collapse: Wraps Trigger and Panel. Holds the open and closed state.
- Trigger: The element pressed to toggle visibility.
- Panel: The region being shown or hidden. Animates between its closed height and the natural height of its content.
Trigger and Panel can sit in any order inside.
Usage Guidelines
When to use this component
- Use to reveal supporting content that belongs with the current page, such as an FAQ-style answer or a "How does this work?" explanation alongside a primary action.
- Use to truncate long content with the option to show more, such as a timetable that displays the next few rows by default.
- Use when the user benefits from staying in context, keeping the page visible while looking at the revealed content.
When not to use this component
- Don't use for content that belongs in its own dedicated screen or surface.
- Don't use to load more items into a list. That's pagination. The action fetches data and doesn't collapse back.
- Don't use to jump to another section of the same page. That's same-page navigation, not disclosure.
-
Don't use to build a tree-shaped UI like a file browser. The mechanic looks similar but the navigation contract is different.
Best Practices
Label the trigger with what gets revealed ("How do prices work?"), not the action ("Tap to expand"). The label is the user's main cue.
Put another interactive element inside the trigger. The trigger should be a single press surface.
Pair the trigger with a visible affordance, such as a chevron, so users can see it will toggle.
Reach for a peek as decoration. Use it only when the partial view actually helps the user decide whether to expand.
Use a peek when a glimpse of the content itself is the best signal that more is available.
Change the affordance's position between Collapses in a sequence. Inconsistent placement makes the pattern harder to learn.
General Component Behaviors
Open and close
A Collapse has two states: open and closed. Pressing the trigger toggles them. The state can also be controlled from outside, so a Collapse can open in response to other interactions on the screen.
Peek
By default, a closed Collapse hides its content fully. With a peek, a fixed amount of content stays visible at all times, so closing reveals the first portion of the content rather than nothing.
Don’t use peek for standard disclosure such as an FAQ answer. Use a peek when a glimpse of the content is what tells the user more is there, such as a timetable showing the next few rows by default. The motion is the same in both modes; only the starting height differs.
Trigger surface
The Trigger is pressable by default. With static content inside, such as a label or an icon, the Trigger handles the press itself. The default press surface can be overridden with another interactive component, such as a button. Either way, there is always a single press surface.
Nesting
Each Collapse owns its own state, so nesting works without coordination between instances.
Content Guidelines
- For standard disclosure, label the trigger with the content being revealed, such as "How do prices work?". For a peek-style trigger, where the content is already partly visible, describe the action instead, such as "Show more" and "Show less". Keep labels short.
- Keep peek content informative on its own. Some users will never open the Collapse.
For further information, see the Content Styleguide.