Create a custom accordion

Build a vertical accordion using Webflow's elements and interactions.

This video features an old UI. Updated version coming soon!

Today, we'll create an accordion-style layout for frequently asked questions. We’re doing this mainly to tinker and explore how we can control specific elements with Interactions, but if you’re looking to just quickly grab a working accordion, we've included a link to this down below. Use it to copy and paste it into your own project, or just to get inspired or deconstruct it.

First - we’ll begin by using the native Dropdown element. Then, we’ll customize our toggle (the thing that will hold our question). We'll make some style changes to our accordion answer. And finally, we'll create a custom trigger (the animation that makes it all work).

So. Let's do this. Let’s create our accordion. And our goal is this: when someone clicks on a question, we want our accordion to snow the answer below it.

Over in our project? We'll drag in a Dropdown element. Using this element is pivotal for what we’re building for this reason: this particular element has default Dropdown actions (we can use these to our advantage). Let’s preview it (let’s see what it does). Click on the dropdown and it opens. Click outside of it and it closes. To turn this into an accordion, there are some changes we need to make.

Before we get there, with our dropdown selected, let’s add a class name. Of course, we'll call it anything we like.

Classes let us reuse styles (that we’ll create for this element). And since we want it to completely fill this (the whole area)? Let’s add 100% to the width. The item fills out all this space (everything available in it’s parent element).

Part one complete.

Part two? Our toggle. Let’s customize it.

And what we wanna do is have our question here, and it’s what someone’ll click on to reveal the answer.

For OUR project, we want our answer and toggle to fill out this space to match the expected behavior (making this entire area clickable) so, we’ll need to change the default.

Another class here - this time calling it something like “accordion toggle,” but you can name it anything you like. Change the display setting to flexbox. Now it fills the space.

One thing to note, as we build we’re preparing our dropdown to collapse. And we want our interaction to collapse behind the toggle (to hide the answer) since we need that let’s add height here that we'll later use to hide that answer (maybe 80 pixels).

As you already know, this toggle will hold our question. So. Let's put a question inside. What this is is up to you. You can use a text block or a heading or a video. A lot works, here. So. Double click to edit the text: What is the meaning of life? Question added.

That’s part 2.

Now part 3. And before we jump in, let’s preview our progress. Our accordion opens, but the default content spills out of it. Of course, that’s not what we want. But, this happens because the default for the dropdown list is set to position absolute. This is great when used in a navbar (like creating a dropdown menu, or meganav). That’s what this element was made for.

But we want to break those rules. Instead, we want our answer to take up space and not be removed from the document flow.

Let’s go over in our Style panel. In our position, let’s change from absolute to static. And second, change the display setting from none to block. While we're at it, let's match the padding of our answer to the padding of our toggle and we can make the background - whatever we like by changing the default (we can make those changes to our background).

The trigger (the accordion item). Let’s set this to hidden, and that's a major point here: because we will want to hide content that spills outside of this area.

And that's it. That's our accordion item content.

Let's put all this together into something functional with an interaction. The key here is the accordion item. Let's make sure it's selected (here in the Navigator) to make it our trigger. Over to our Interactions panel.

Since we’re using a Dropdown element we can select a trigger specific to it “Dropdown opens,” here. And we'll be doing two different things: menu opens and the accordion item expands, and menu closes to collapse our answer.

Let's create the first animation when the menu opens. We can name this anything we like. As we know, we want to animate the trigger itself.

And, that's what we want to make sure is currently selected in the Navigator. So we'll go in and add an action to set the size, we'll go down and set the height here to 80 pixels. This means we're collapsing the content to the same size as the toggle (we know the toggle is 80 pixels tall). And since we set the overflow to hidden, the answer won’t be shown initially (and that’s why we set it to overflow: hidden). Speaking of initially - let’s set this step as our initial state (so that it’s initially closed).

Now, to really customize our accordion let’s spin the dropdown icon (the arrow, here) when it’s opened. This isn’t required, but it is a common interaction seen with accordions to show it can be collapsed after it’s opened, but you can animate this however you like.

With the icon selected. Let’s add a rotation with this initial action. And, we’ll set the initial z-axis rotation (we’ll spin it from here) to 0 degrees (this is where it’ll start). But, there’s something wrong with this - we’re only affecting this element. If we reuse this interaction on other FAQs, it will only work for this one.

Let’s get out of the interaction and add a class name to our icon (so that the interaction will affect any child with that class name). (All we have to do, is name that class).

And after we do? We’ll just select the accordion item again - to make sure we’re able to access that interaction. Of course, back in Interactions, we can see it right there. So let’s go back to finish the job we started.

Change the action from this selected element to class? Yes. And let’s make sure we set this because we want to make sure this dropdown animation affects “Only children with this class.” That’s our option. The trigger (the accordion item) - we want it to rotate the icon only for icons that are inside of it.

Okay. Let’s finish this. Over in the Navigator, let’s select our accordion-item. And let’s add an action (a size animation) to open the accordion. Auto does this for us: it lets this element expand based on the contents - automatically). And, with our icon selected, here - let’s add to our size action (let’s add an action at the same point as our SIZE action) - and we’ll set the rotation to 180 degrees on the z-axis (that’ll spin it).

If we Preview this, now? As expected - clicking on the question works perfectly. Let's build the other part of this, the collapsing effect.

Let’s back out from here, and create a new animation on menu close. We can start building out what we'll call “Accordion close,” (or any name we like) and this one's even simpler.

With the Accordion item selected, we’ll set the size (the height of it) to match (80 pixels, here). And with the icon (accordion icon) selected - we’ll set the rotation to 0 degrees on the z-axis.

If we go to preview mode, it works perfectly. Open. Close. Open. Close. Need to add some more items - select the accordion item here in the Navigator. To copy, let’s hit Command C on Mac (Control C on PC), and then Command V or Control V to paste and we’ll paste this a total of three times.

Back in Preview. You’ll notice now that opening one and then clicking to open another - automatically closes it. And that’s important - the DROPDOWN element automatically does this for us. That's it. That's the core functionality of an accordion.

So. We covered creating a custom accordion using the Dropdown element, then walked through how to customize our accordion toggle (which holds our question), we customized our accordion answer (the answer that drops down beneath our question). And finally, four, we created a custom accordion trigger (that animated when someone clicks on the question).

Will I build this from scratch each and every time? No. I’ll be copying and pasting. So check out Grimur’s lesson on copying and pasting between projects if you haven’t already seen it.

But for those of us who want to build from scratch, and for those of us who want to better understand how these things are put together, this is one way to create a custom accordion in Webflow.

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:

Add a Dropdown element

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:

Open the Add panel
Go to the Components section of the panel
Drag the Dropdown element onto the canvas

Change default Dropdown styles

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.

Select the parent Dropdown element
Go to the Style panel
Add a class name (e.g. Accordion item)

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.

Customize toggle

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:

Select the Dropdown toggle and give it a class name (e.g. “Accordion toggle”)
Change the Display setting to Block or Flexbox (this fills the horizontal space)
Add a height value (e.g. 80 pixels)

Style accordion

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:

Select the Dropdown list element
Go to the Style panel
Select Block for the Display style
Select Static for the Position style

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.

Custom trigger

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.

Dropdown opens

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:

Click the Action dropdown menu
Select Start an animation
Click the plus icon to add a custom animation

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:

Two initial actions (this applies styles to an element before the page loads)
Two opening actions that happen simultaneously when someone clicks the accordion

Initial actions

And, you can create the initial style for our Dropdown element in 5 steps:

First, make sure the parent Dropdown element is selected (we named it “Accordion item” for this example)
Click the plus icon in the Interactions panel (to add an action for our selected element)
Select the Size option
Click the Timing toggle to “Set as initial state”
Enter a Height value (e.g. 80 pixels)

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:

Select the Icon element
Click the Style panel
Add a class name (e.g. Accordion icon)

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.

Open actions

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.

Accordion size

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:

Select the parent Dropdown element (we named it “Accordion item” for this example)
Add a Size action (beneath the Initial actions)
Set the Height to Auto

This opens your accordion to match the size of any content inside.

Rotate icon

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:

Select the Icon element (we named it “Accordion icon” for this example)
Add a Rotate action (combine it with the Size action you just created so that they animate simultaneously)
Set the z-axis rotation to 180 degrees

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.

Dropdown closes

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:

Click the Action dropdown menu
Select Start an animation
Click the plus icon to add a custom animation

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.

Accordion size

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:

Select the parent Dropdown element (we named it “Accordion item” for this example)
Add a Size action
Set the Height to 80 pixels

This closes your accordion to match the initial size.

Rotate icon

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:

Select the Icon element (we named it “Accordion icon” for this example)
Add a Rotate action (combine it with the Size action you just created so that they animate simultaneously)
Set the z-axis rotation to 0 degrees