Accordion
v1.1
An accordion is a tool used to hide and reveal content as part of progressive disclosure. Tapping the icon button on each accordion row will expand or collapse the content.
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.short.1
- 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.short.1
- No easing, rotation should hold until next keyframe