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.
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.