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.
Video description: An animation of an accordion expanding and collapsing interaction. When the expansion button is selected, the container grows to full size, and reveals the interior text with a fade on. When collapse is selected the container goes back to its original size and the text inside fades off.
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