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
The Accordion component will animate to expand and collapse each row.
Shape
Text opacity
Chevron position (Y) 1
Chevron position (Y) 2
Chevron rotation
Shape
Text opacity
Chevron position (Y) 1
Chevron position (Y) 2
Chevron rotation
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.