Questions are frequently asked, & nearly as often answered. And there's no better way to catalog these exchanges than an FAQ accordion. This Webflow-native component uses a combination of "all" & "parent/sibling/child" interactions to link together a group of hide/show components.
They just wash up on shore.
The space bar.
An impasta.
Update: 3/31/2023 - Updated accordions to be more accessibility friendly.
Building these accordions can be a little tricky, but a few basic concepts make things far easier to understand.
With all that in mind, we're ready to start building.
1. The basic structure of the component.
2.Set up basic styling.
On the Accordion div, we'll add Border - M, Text - White, & Border Radius - S. We'll also add some text inside Accordion Head & Accordion Body, along with some padding. Tip: It's important that we apply any padding to a div nested inside the Accordion Body div because any top or bottom padding added directly to that div will prevent us decreasing the height to 0px.
3.Create the basic functions of the "open" animation.
On the Accordion Head div, we'll apply a Click interaction. This will need to be applied to the class, so that the interaction can be used modularly, as will all steps of the animation itself. We'll want to set the initial state of the Accordion Body to height: 0px, & set it to "only siblings with this class." And on click, we'll want to set Accordion Close to "only siblings with this class" & set it to "show." Then we'll want to set the height of Accordion Body to "auto." This will enlarge the div to whatever size is needed to accommodate the content within.
4.Create the basic functions of the "close" animation.
On the Accordion Close - Universal Trigger div, we'll apply a Click interaction. Again, this will need to be applied to the class, as will all steps of the animation itself. We'll set Accordion Close Trigger to "all elements with this class" & set it to "hide." (Because only one accordion drawer can be open at a time, so one is closing is no different than all closing.) Then we will set the Accordion Body - Universal Trigger to "all elements with this class" & set it to a height of 0px. (For the same reason.)
5. Create the "close all" functions of the "open" animation. Since the Universal Trigger classes are appended to the basic structure classes, we'll need to create temp divs to apply these classes as base classes in order to avoid assigning these animations to the combo class. F we'll set cAccordion Close - Universal Trigger & within the "open" animation, set it to "all elements with this class" & set the display to hide. This will need to be ordered before the Accordion Close animation. We'll also set Accordion Body - Universal Trigger to "all elements with this class" & give it a height of 0. Again, this should be ordered before Accordion Body in the animation. These can be grouped together so that they occur simultaneously, but needed to be ordered correctly for the sake of overriding.
6. Add additional functionality. You might want to animate an icon when a drawer opens or closes, or change the background color. These will all just need to follow the basic steps that we applied to Accordion Body & Accordion Body - Universal Trigger. In other words, for every animation that occurs on "open," you'll need to use a Universal Trigger class to reset that animation on click. View this project in Webflow in order to dig into the interactions created for this demo.
7. Duplicate the component. Once the component is done, you'll be able to duplicate as many as you'd like & they should all work codependently of one another. But if you'd like to have multiple sets on the same page, you'll have to recreate the component with unique class names.
8. Hit the tennis courts. You are finally done.