Accordion
v1.2
An accordion is a vertically stacked set of sections that can be individually expanded or collapsed to show or hide a block of related content, allowing users to scan headings and reveal details on demand.
Motion specs
The Accordion component will animate to expand and collapse each row.
Expand
1. Container + text
Shape
- Close → Open
- Duration: motion.duration.medium.3
- Ease: motion.easing.standard
Text opacity
- 0% → 100%
- Duration: motion.duration.medium.2
- Ease: motion.easing.continuous
2. Chevron
Chevron position (Y) 1
- Delay: motion.duration.short.1
- 0 → +7px down
- Duration: motion.duration.medium.1
- Ease: motion.easing.standard
Chevron position (Y) 2
- +7px down → 0
- Duration: motion.duration.short.3
- Ease: motion.easing.standard
Chevron rotation
- Delay: motion.duration.short.1
- 0° → 180°
- Duration: motion.duration.instant
- No easing, rotation should hold until next keyframe
Collapse
1. Container + text
Shape
- Open → Close
- Duration: motion.duration.medium.1
- Ease: motion.easing.standard
Text opacity
- 100% → 0%
- Duration: motion.duration.short.3
- Ease: motion.easing.continuous
2. Chevron
Chevron position (Y) 1
- Delay: motion.duration.short.1
- 0 → +7px down
- Duration: motion.duration.medium.1
- Ease: motion.easing.standard
Chevron position (Y) 2
- +7px down → 0
- Duration: motion.duration.short.3
- Ease: motion.easing.standard
Chevron rotation
- Delay: motion.duration.short.1
- 180° → 0°
- Duration: motion.duration.instant
- No easing, rotation should hold until next keyframe