Build a vertical accordion using Webflow's elements and interactions.
There are a number of ways to create a custom accordion in Webflow. This can be done using HTML elements (found in the Add panel) to create the accordion, adding style to those elements with the Style panel, and creating the accordion animation using Interactions.
Let's walk through how to create a custom accordion using the Dropdown element
In this lesson:
First, you’ll drag in a dropdown element. Using this element is pivotal for what you’re building for this reason: this particular element has default actions built into it that you can use to your advantage. Those actions include showing the Dropdown list when clicked, and closing the opened Dropdown element when you click anywhere outside of it.
To add it to your project:
Now, you want to change the default style, so let’s first add a class name to the Dropdown element before making style changes in the Style panel.
Classes let you reuse styles on any other elements you create (like other accordions). Learn more about Classes.
For this example, you want your parent element (the parent Dropdown element) to completely fill the space of whatever holds your custom accordion. To do that, enter 100% as the value for the width.
Now that you have your Dropdown element in your project (with some style added to it), lets now customize your toggle. And what you want to do is this: you want to update the default styles on your toggle so that it completely fills the parent element (the element holding it).
The default styles you’ll change include the Dropdown toggle’s display and height.
You want to set a height on the toggle element so that you can hide the answer (the content inside of the Dropdown list) when the accordion is closed.
To do this:
Before we continue, let’s preview our progress. And we can do this by clicking our Preview icon near the top-left of the Designer. Learn more about Preview mode.
Now when you click on your accordion, it opens but the default content spills out of it. Of course, that’s not what you want. But, this happens because the default position style for the Dropdown list is Absolute. This is great when used in a navbar (like creating a dropdown menu, or meganav) when we want the list items to overlay content. That’s what this element was made for.
To use the Dropdown list for your accordion, you can change the default style. With your Dropdown list element selected - go over to the Style panel. For the Position style, let’s change the style from Absolute to Static. And second, change the Display setting from None to Block. And you can do that it 4 steps:
Your answer (the answer to the question of the accordion) is now visible and you can change the text, add an image element, or any element that best suits your project.
The Dropdown element is ready for your custom trigger that will both open and close your accordion when anyone clicks on it. To animate it: first, select the Dropdown element. For our example, “Accordion item” is the name we gave our parent Dropdown element and that’s what you’ll select.
Then, go to the Interactions panel to select the Dropdown opens option in the Element trigger section.
Note: Dropdown opens is only available as a trigger for the Dropdown element.
The leading Interaction is when the Dropdown opens. This Interaction will include the initial states (the starting point for our animation) and the actions that happen once the accordion is clicked. To begin, let’s create the Dropdown opens interaction:
You can name your animation anything you like (e.g. Accordion opens)
For this example, you’ll create an opening animation for the accordion with four actions:
And, you can create the initial style for our Dropdown element in 5 steps:
Setting the initial state for the “Accordion item” to have a specific height (the height the size of the toggle) will let your accordion begin with the answer hidden when it is closed (that’s the initial state).
Next, select the Icon element of the dropdown so that you can set the initial action for it (you can select it in the Navigator or on the canvas).
And because we want to have the interaction effect only the icon in this accordion, let’s give the Icon element a class name (you can name it whatever you like). We can do this in 3 steps:
Then, select our Accordion item element. Next, you reopen the Interaction you created by clicking the Interactions icon to open the Interaction panel. And, select the Dropdown opens interaction that you’ve started. Now, you can select the Icon element and add an initial Rotate action (we gave it a class name of “Accordion icon”).
Set this Rotate action as the initial action by combining (adding the action at the Initial point) or clicking the Timing toggle to “Set as initial state”
And, you want the initial rotation of your icon to be 0 degrees on the Z-axis. We’ll spin the icon from this point.
You now have your initial actions complete. Let’s create the actions that display our answer. And these actions happen after the initial actions.
The two actions include changing the size of the “Accordion item” and rotating the “Accordion icon” 180 degrees.
What you’re trying to do is change the size of the accordion from 80 pixels (initial size) to the size of the content inside. With the Interaction panel open, changing the size of your “Accordion item” can be done in 3 steps:
This opens your accordion to match the size of any content inside.
Your goal is this: you want to rotate the icon of the accordion from 0 degrees on the z-axis (initial size) to 180 degrees on the z-axis. With the Interaction panel open, rotating the “Accordion icon” can be done in 3 steps:
This rotates your icon so that it’s pointing up.
Note: the Easing of each action can be changed. Learn more about Interpolation, easing, and smoothing.
The last Interaction is when the Dropdown closes. This Interaction will include the actions that happen once the accordion item is clicked a second time or when some clicks outside the accordion item. To begin, let’s create the Dropdown closes interaction:
You can name your animation anything you like (e.g. Accordion opens)
For this example, you’ll create a closing animation for the accordion with two actions.
The two actions include changing the size of the “Accordion item” and rotating the “Accordion icon” back to 0 degrees.
What you’re trying to do is change the size of the accordion from Auto to 80 pixels (which is back to the initial size). With the Interaction panel open, changing the size of your “Accordion item” can be done in 3 steps:
This closes your accordion to match the initial size.
Your goal is this: you want to rotate the icon of the accordion from 180 degrees on the z-axis to 0 degrees on the z-axis (the initial rotation). With the Interaction panel open, rotating the “Accordion icon” can be done in 3 steps:
This rotates your icon so that it’s pointing down again.
That’s it! You created a custom accordion using Interactions!