Create a custom accordion

Build a custom accordion using Webflow’s dropdown element and interactions.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can create a custom accordion by using a dropdown element and interactions. In this lesson, you’ll learn:

  1. How to add a dropdown element
  2. How to customize your dropdown toggle
  3. How to style your accordion
  4. How to create your custom animation
A sleek and polished custom accordion design that contains three dropdown items. One dropdown item is expanded to reveal the text inside.

How to add a dropdown element

The dropdown element has default built-in actions that make it useful as a custom accordion — it opens the dropdown list when clicked and closes it when a different element or part of the page is clicked. 

You can add a dropdown element to your site by going to Add panel (A) > Elements > Advanced and dragging the dropdown element onto the canvas. 

The dropdown element highlighted in the Advanced section of the Add panel.

How to change the default dropdown styles

To use the dropdown in your custom accordion, you’ll need to change the default dropdown element styles. In particular, you’ll need to adjust the width so that the dropdown completely fills the space of its parent element (i.e., whatever element holds the custom accordion). 

Pro tip: Give your dropdown a class (e.g., “Accordion item”) to make your styles reusable. Learn more about styling with classes.

To change the default dropdown styles: 

  1. Select the parent dropdown element on the Designer canvas (we gave it a class of “Accordion item” for this example)
  2. Go to Style panel > Size
  3. Set Width to 100%
Size settings for the “Accordion item” element in the Style panel. Its width is set to 100%.

How to customize your dropdown toggle

Now, you’ll need to customize your dropdown toggle so it completely fills its parent element (i.e., the element holding it) and hides the content inside of the dropdown list when the accordion is closed. To do this, you can adjust the dropdown toggle’s display and height properties:

  1. Select the dropdown toggle on the canvas and give it a class (e.g., “Accordion toggle”)
  2. Go to Style panel > Layout
  3. Set Display to flexbox to fill the horizontal space
  4. Set Align to center to vertically center the text on your accordion
  5. Go to Style panel > Size
  6. Set a Height value (e.g., 80px)
Layout and size settings for the Accordion toggle element in the Style panel. Its display is set to flex, align set to center, and height set to 80px.

How to style your accordion

At this point, if you preview your site and click on your accordion, you may notice that the accordion opens, but the default content inside will overlay any content around it. This happens because the default position style for the dropdown list is absolute. For traditional dropdown use cases like in menus or navbars, this is the desired behavior, but you’ll need to adjust the default position for your custom accordion so the content around the element makes room (e.g., slides down or up) when the content inside the accordion expands. 

A dropdown element is shown highlighted in a navbar. By default, it overlays content below it on the webpage when opened.

To style your accordion: 

  1. Select the parent dropdown element on the canvas (e.g., the “Accordion item”) 
  2. Click the “cog” icon to open Dropdown settings and click “Show” next to Menu
  3. Select the Dropdown list element on the canvas
  4. Go to Style panel > Position
  5. Set Position to static
  6. Select the parent dropdown element (e.g., “Accordion item”) on the canvas
  7. Go to Style panel > Size
  8. Set Overflow to hidden to hide any content that spills outside of the accordion area
The dropdown settings menu includes options to show or hide the dropdown list. 
Position settings for the dropdown list element in the Style panel. Its position is set to static.

How to create your custom animation

Now, you’ll create a custom animation that will both open and close your custom accordion with the following steps: 

  1. Create initial actions
  2. Animate the accordion opening
  3. Animate the accordion closing

Create initial actions

You’ll start by creating 2 initial actions (i.e., styles applied to the element before the page loads) for your accordion.

First, you’ll create an initial action for your dropdown: 

  1. Select the dropdown element on the canvas (e.g., “Accordion item”)
  2. Go to Interactions panel > Element trigger and click the “plus” icon to create a new element trigger
  3. Choose Dropdown opens
  4. Click Select an action under Menu opens
  5. Choose Start an animation under Custom animation
  6. Click the “plus” icon next to Timed animations
  7. Give your custom animation a name (e.g., “Accordion opens”)
  8. Click the “plus” icon next to Actions to add an action to your animation
  9. Choose Size under Miscellaneous
  10. Check the “Set as initial state” checkbox under Timing
  11. Enter a height value (e.g., 80px) under Size that matches the height you gave your dropdown toggle (e.g., the “Accordion toggle”) in the previous steps
  12. Click Save

Next, you’ll create an initial action for the toggle icon: 

  1. Select the Icon within the dropdown element
  2. Go to the Style panel and give your icon class (e.g., “Accordion icon”) — now you can make the animation affect all instances of the icon
  3. Select your parent dropdown element on the canvas (e.g., “Accordion item”)
  4. Open the Interactions panel 
  5. Select the Dropdown opens interaction you created in the steps above
  6. Click the “cog” icon next to the custom timed animation you created in the steps above (e.g., the “Accordion opens” interaction)
  7. Select the icon (e.g., “Accordion icon”)
  8. Click the “plus” icon next to Actions to create an initial action for the icon 
  9. Choose Rotate under Transform 
  10. Check the “Set as initial state” checkbox under Timing 
  11. Go to Rotate and set the z-axis to 0 degrees
  12. Click Save
A Rotate action for the Accordion icon element is highlighted in the Interactions panel. The checkbox for “Set as initial state” is checked.
The Rotate action for the Accordion icon element has a z-axis set to 0 degrees.

Animate the accordion opening

Now, you’ll create the accordion opening actions that occur simultaneously when the accordion is clicked — the “Accordion item” size will change to the size of the content inside it, and the “Accordion icon” will rotate 180 degrees. 

To change the size of the “Accordion item” and rotate the “Accordion icon” when the accordion is opened: 

  1. Select the parent dropdown element on the canvas (e.g., “Accordion item”)
  2. Open the Interactions panel 
  3. Choose the Dropdown opens interaction you created in the previous steps
  4. Click the “cog” icon next to the custom timed animation you created in the previous steps (e.g., the “Accordion opens” animation) 
  5. Click the “plus” icon next to Actions to add an action to your animation
  6. Choose Size under Miscellaneous
  7. Uncheck the “Set as initial state” checkbox under Timing
  8. Go to Size and enter “auto” for the height — this matches the height of your accordion to its content inside 
  9. Select the icon (e.g., “Accordion icon”)
  10. Click the “plus” icon next to the “Accordion item” Size action you just created to add another action at that timestamp — this ensures that both of these actions animate simultaneously
  11. Choose Rotate under Transform  
  12. Go to Rotate and set the z-axis to 180 degrees — this rotates the icon so that it points up when the accordion opens
  13. Click Save
Note: You can change the easing (i.e., the acceleration and deceleration of the animation transition) of each action. Learn more about interpolation, easing, and smoothing.
A “plus” sign appears next to the Size action affecting the Accordion item in the Interactions panel.
You can hover an existing action to create an additional action at the same timestamp. Actions that occur at the same timestamp will animate simultaneously.
The complete Accordion opens animation contains 2 initial actions and 2 actions that affect the size of the accordion item and the rotation of the accordion icon when the accordion is clicked.

Animate the accordion closing

Now, you’ll create an interaction for the accordion closing. This interaction will include the actions that occur when the accordion item is clicked a second time or when a site visitor clicks outside the accordion item — the accordion item will revert to its initial size, and the icon will rotate back to 0 degrees. 

To animate the accordion closing:

  1. Select the parent dropdown element on the canvas (e.g., “Accordion item”)
  2. Open the Interactions panel 
  3. Choose the Dropdown opens interaction you created in the previous steps 
  4. Click Select an action under Menu closes 
  5. Choose Start animation
  6. Click the “plus” icon next to Timed animations to create a custom animation
  7. Give your custom animation a name (e.g., “Accordion closes”)
  8. Click the “plus” icon to add an action to your animation
  9. Choose Size under Miscellaneous
  10. Enter a height value (e.g., 80px) that matches the height you gave your dropdown element for its initial state in the previous steps
  11. Select the icon on the canvas or in the Navigator (e.g., “Accordion icon”)
  12. Click the “plus” icon next to the “Accordion item” Size action you just created to add another action at that timestamp — this ensures that both of these actions animate simultaneously
  13. Choose Rotate under Transform 
  14. Go to Rotate and set the z-axis to 0 degrees — this rotates the icon back to its initial position so it points down when the accordion closes
  15. Click Save
The final Accordion closes animation contains 2 actions that affect the size of the accordion item and the rotation of the accordion icon when the accordion is closed.

And that’s it! You just successfully created a custom accordion using interactions!

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top