Motion · State
Collapse
Content expands and collapses with its real height, so the layout below moves instead of jumping.
Choose which events send you an email. Product updates, security alerts and weekly summaries can be turned off at any time.
Specs#
| Property | height auto, opacity |
| Duration | 250ms |
| Easing | --ease-in-out |
| Chevron | rotate 0→90°, 200ms |
| Built with | Motion |
Guidelines#
Use for
- Accordions, FAQs, advanced settings
- Show more / show less
Avoid
- Animating max-height with a guessed value
- Collapsing content the user is reading