Published
January 19, 2023
Updated
An Accordion is a popular element in the same family as tabs. It allows you to present sections of content selectively, so that the user isn't confronted with too much information all at once.
Tabs generally have two variations; tabs on the top ( or bottom ) and tabs on the side ( left or right ).
Accordions similarly have two presentations variations - expanding vertically ( common ), or expanding horizontally ( less common ).
They also have behavioral variations;
- View one panel at a time. Opening a new panel closes other open panels, like a tab only shows one at a time.
- View multiple panels at a time. Each panel opens and closes independently of the others.
- Partial opening ( rare ). Draggable to allow for a kind of reveal.
Implementations
Webflow's Tutorial
- Accordion dropdown arrow - Webflow interactions & animations tutorial
Other Cloneables
https://www.flowradar.com/cloneables/faq-accordion-webflow
https://webflow.com/made-in-webflow/website/FAQ-Accordian-or-Flowbase?gspk=anVzdGlucGhpbGxpcHM5OTUw&gsxid=dCsrNi7Oa875