FAQ Accordion (from CMS) in Webflow in 7 min

This FAQ Accordion is the major key to any accordion you need for your Webflow project. It's simple to setup, a breeze to use, and clients love it. Don't forget to get money, pillows, and THE BEST clients with this FAQ section.

// CLONE IT

// FREE resources

// Premium content

// Discounts
🎢 Get 10% GSAP: WEBBAE10

// Connect

00:00 What it is
00:10 Project Setup
03:03 Interaction
06:24 What this needs is a box shadow

[enginboz]

Hey thank you very much for this tutorial. I appreciate it. Well explained. One Question: How can i close the open one's when i click the next question?

[VoyagesJapan]

Awesome tutorial! Thank you! ⚠ And heads up to anyone who might have run into the same problem ⚠ If you've set your "Answer" field in your CMS to Rich Text, you also have to drag a Rich Text field into your template in order to be able to connect it through the dropdown. It won't give you a dropdown option with just a regular Text Block if the field in your CMS is not a regular Text block. Subbed!!

[GregWarner]

Super helpful, just what I needed! Thanks!

[AidilGoh]

This is better accordion than the one in the Webflow University version using the dropdown component as I was struggling with the questions div not being able to auto adjust its height (the heights were fixed). But this one seems like a much better approach, thanks!

[heatherliu]

They don’t want you to jetski!!! The DJ Khaled Easter eggs are too good

[IgoSize]

Awesome tutorial - easy to follow and I love the result!

I've run into the problem though - whenever I open one item, all the other ones open as well. I've checked your cloneable and everything seems to be the same in my project. Do you know why this might be happening? Any help will be much appreciated!

[stackathy]

thank u for this!! how might i make it so only clicking the question opens the content? (i don't want users to be able to click the answer and then it closes)

[Mger]

Is it possible to make the first item of the accordion open while others closed inside a CMS?

[niLmagikero]

great work! how to do if you want to close an accordion if a user clicks another item? Is it Jquery or can native webflow IX can achieve this?

[nareshs]

what if i want to open one at a one time?
i mean when i'm clicking on other question those are also open but i want that when i click on other question so last opened question will get close

[chrier]

I wanted to have a carousel within my 'answer' but when using the carousel arrows it closes the 'answer', is there a way to get around this?

[ohwhatworld]

But how do you set it up so that you can add more accordion sections via the CMS?

[MatiyaSzauer]

I followed all of the steps but when I click on the drop down, all of the arrows turn as opposed to just the one I am clicking. The text boxes don't open, just the arrow rotation, any suggestions? Thanks!

[keziaisrael]

This looks easy but is hard to follow because you move and talk very fast.
*Update: Realized I can slow down the video, did it, and got the animation to work. Thanks.