Create a custom accordion

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:

1. Add a Dropdown element
2. Customize toggle
3. Style accordion
4. Custom trigger

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:

1. Open the Add panel
2. Go to the Components section of the panel
3. 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.

1. Select the parent Dropdown element
2. Go to the Style panel
3. 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:

1. Select the Dropdown toggle and give it a class name (e.g. “Accordion toggle”)
2. Change the Display setting to Block or Flexbox (this fills the horizontal space)
3. 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:

1. Select the Dropdown list element
2. Go to the Style panel
3. Select Block for the Display style
4. 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:

1. Click the Action dropdown menu
2. Select Start an animation
3. 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:

1. First, make sure the parent Dropdown element is selected (we named it “Accordion item” for this example)
2. Click the plus icon in the Interactions panel (to add an action for our selected element)
3. Select the Size option
4. Click the Timing toggle to “Set as initial state”
5. 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:

1. Select the Icon element
2. Click the Style panel
3. 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:

1. Select the parent Dropdown element (we named it “Accordion item” for this example)
2. Add a Size action (beneath the Initial actions)
3. 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:

1. Select the Icon element (we named it “Accordion icon” for this example)
2. Add a Rotate action (combine it with the Size action you just created so that they animate simultaneously)
3. 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:

1. Click the Action dropdown menu
2. Select Start an animation
3. 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:

1. Select the parent Dropdown element (we named it “Accordion item” for this example)
2. Add a Size action
3. 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:

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

This rotates your icon so that it’s pointing down again.

That’s it! You created a custom accordion using Interactions!