How To Build An Animated Accordion in Webflow

By Neal W., based on the YouTube Video Tutorial by Julian Galluzzo from Memberstack linked below

TL;DR

• Learn how to create a fully functional animated accordion in Webflow using native interactions. 
• This concise, step-by-step guide shows you how to structure your elements, build open/close animations, and add a rotating chevron for a smooth, professional finish.
• Want to save time or study the build? You can clone Julian’s version here.

Introduction

Accordions are a simple yet powerful UI pattern for FAQs, content toggles, and collapsible sections, just to name a few potential uses. But creating them can be tricky, especially for those just getting started.

In this tutorial, we walk you through how to build an animated accordion in Webflow using the new interaction tools. You’ll learn how to structure your elements, set up open/close animations, and make your chevron icon rotate dynamically when toggled.

💡 Pro Tip: If you just need a working FAQ and want to skip the build, you can clone the finished version

Structuring the Accordion Elements

Before we jump into animations, we need a solid foundation.

1. Create your FAQ wrapper and items

• Add a parent container and give it a class like faq-wrapper.
  
  
• Inside, create multiple faq-item elements. Each will act as a single accordion row.
  
  

2. Set up each FAQ item with two main parts:

• faq-top → This will be your clickable trigger (the question).
  
  
• faq-bottom → This will contain the hidden content (the answer).
  
  

3. Add spacing inside the inner elements, not the wrapper

💡 Pro Tip: It’s better to avoid top/bottom padding directly on the faq-bottom wrapper. Instead, apply padding to the elements inside (like your paragraph or text block). This ensures the animation height adjusts cleanly.

Creating the “Open” Interaction

With the structure in place, let’s animate it.

1. Select your trigger: Click on your faq-top element and create a new interaction. Choose “On Click” as the trigger.

2. Name your animation: Call it “Open Accordion.”

3. Set up the click logic:

• Under “Affect,” choose “All elements with this class” to apply it universally.
  
  
• Change the click behavior to “On 1st, 3rd, 5th click…” (odd numbered clicks).
  
  
  
  • This means it will open on the first click and close later on the even click setup.

4. Add a height animation:

• Target → Next Sibling (this selects the faq-bottom under the clicked top).
  
  
• Duration → 0.25s
  
  
• Action → Change height from 0px to auto.
  
  

💡 Pro Tip: Using auto makes the content expand naturally, no matter how much text is inside.

Building the “Close” Interaction

Now, let’s make it close on the next click.

1. Create a new interaction: Still on your faq-top, add another “On Click” trigger.

2. Name it:  “Close Accordion.”

3. Set the trigger behavior:

• Target all matching elements again.
  
  
• This time choose “On 2nd, 4th, 6th click…” (even numbered clicks).
  
  

4. Add the reverse animation:

• Target → Next Sibling
  
  
• Duration → 0.25s
  
  
• Action → Change height to 0px.
  
  

Now, when you click once, the panel opens, click again, and it closes.

Animating the Chevron Icon

A subtle animation can make your UI feel polished. Let’s rotate that chevron so users can see when a section is open thanks to this clear visual tool.

1. Open your “Open Accordion” animation. Add a new custom action called “Rotate Open Chevron.”

2. Target the icon inside your faq-top:

• Scope → Descendants
  
  
• Target class → .icon-embed-xsmall (or whatever class your chevron uses. Be careful here to make sure you have your class correct.  A typo here means no rotation).
  
  

3. Add the rotation:

• Start → 0°
  
  
• End → 180°
  
  
• Duration → 0.25s
  
  

4. Duplicate this for the “Close Accordion” animation:

• Same target.
  
  
• Reverse the rotation → 180° to 0°.

Testing the Final Accordion

Now let’s test everything together.

Click through your accordions:

• Click once → Panel opens, chevron rotates.
  
  
• Click again → Panel closes, chevron resets.
  
  

Check timing consistency between open and close (both should be around 0.25s for a smooth feel). If one feels off, double-check durations in each interaction, and alter to fit the style and feel of your site.  

Final Thoughts

Congratulations! 🎉 You just built a fully animated accordion in Webflow using native interactions! 🎉

This setup gives you:

• Clean, responsive animations
  
  
• Control over timing and easing
  
  
• Expandable design for FAQs, menus, or any collapsible sections
  
  

💡 Pro Tip: You can reuse this accordion anywhere, just copy the structure and rename your classes for different content.

If you would like to save time or study the build in more detail, you can also clone Julian’s version here.

Troubleshooting

Problem: Text clips when opening
Fix: Ensure you're animating to height: auto, not a fixed pixel value

Problem: All accordions open at once
Fix: Check that you're using "Next Sibling" targeting, not "All elements"

Problem: Chevron doesn't rotate
Fix: Verify the icon class name exactly matches (.icon-embed-xsmall not .icon-embed-small)

Problem: Animation feels jerky
Fix: Remove padding from .faq-bottom wrapper; add it to inner elements instead

FAQ

Q: Can I make only one accordion open at a time?
A: Yes, but you'll need to add a "close all others" step to your open interaction. Target all .faq-bottom elements except the clicked one and set their height to 0.

Q: Why use odd/even clicks instead of a toggle?
A: Webflow's IX 2.0 doesn't have a native toggle. The odd/even click pattern replicates toggle behavior cleanly without custom code.

Q: My animation is slower than 0.25s. Why?
A: Check the "Start" delay in your animation settings. It should be set to 0s, not a delayed start time.

Q: Can I use this with Memberstack gated content?
A: Absolutely. Accordions work great for member-only FAQs, conditional content reveals, or dashboard panels.

Q: Does this work on mobile?
A: Yes! The accordion is fully responsive. Just test your padding and font sizes across breakpoints to ensure readability. 

‍