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.
- Skin
- Marko
- React
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.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