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