Create a custom accordion - Webflow help

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.

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).

To change the default dropdown styles:

1. Select the parent dropdown element on the Designer canvas (given a class of “Accordion item” for this example)
2. Go to Style panel > Size
3. Set Width to 100%

How to customize your dropdown toggle

Now, you’ll need to customize your dropdown toggle so it completely fills its parent element and hides the content inside of the dropdown list when the accordion is closed. 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
5. Go to Style panel > Size
6. Set a Height value (e.g., 80px)

How to style your accordion

If you preview your site and click your accordion, you may notice the accordion opens, but the default content overlays content around it. This occurs because the default position style for the dropdown list is absolute. You'll want to change it so content expands and shifts surrounding elements.

To style your accordion:

1. Select the parent dropdown element (e.g., “Accordion item”)
2. Click the “cog” icon to open Dropdown settings and show the Menu
3. Select the Dropdown list element
4. Go to Style panel > Position
5. Set Position to static
6. Select the parent dropdown element (“Accordion item”)
7. Go to Style panel > Size
8. Set Overflow to hidden

How to create your custom animation

Create a custom animation that opens and closes your custom accordion:

• Create initial actions
• Animate the accordion opening
• Animate the accordion closing

Create initial actions

You’ll start by creating two initial actions for your accordion.

For your dropdown:

1. Select the dropdown element (“Accordion item”)
2. Go to Interactions panel > Element trigger and create a new element trigger
3. Choose Dropdown opens
4. Select an action under Menu opens
5. Choose Start an animation under Custom animation
6. Create a timed animation and name it (e.g., “Accordion opens”)
7. Add an action to your animation: Size under Miscellaneous
8. Set as initial state
9. Enter a height value (e.g., 80px)
10. Save

For your toggle icon:

1. Select the Icon within the dropdown element
2. Give your icon class (e.g., “Accordion icon”)
3. Select parent dropdown element
4. Open Interactions panel
5. Select Dropdown opens interaction
6. Edit the timed animation (“Accordion opens”)
7. Select the icon (“Accordion icon”)
8. Add action: Rotate under Transform
9. Set as initial state
10. Set z-axis to 0 degrees
11. Save

Animate the accordion opening

To open accordion and rotate icon:

1. Select parent dropdown element
2. Open Interactions panel
3. Choose Dropdown opens interaction
4. Edit timed animation (“Accordion opens”)
5. Add action: Size under Miscellaneous
6. Uncheck initial state
7. Enter “auto” for height
8. Select icon (“Accordion icon”)
9. Add action (at same timestamp): Rotate under Transform
10. Set z-axis to 180 degrees
11. Save

Animate the accordion closing

To animate closing:

1. Select parent dropdown element (“Accordion item”)
2. Open Interactions panel
3. Choose Dropdown opens interaction
4. Select action under Menu closes
5. Choose Start animation
6. Create timed animation and name it (e.g., “Accordion closes”)
7. Add action: Size under Miscellaneous
8. Enter height value (e.g., 80px)
9. Select icon
10. Add action (same timestamp): Rotate under Transform
11. Set z-axis to 0 degrees
12. Save

Back to webflow help