How to make an accordion in Webflow | Free cloneable included

Get our free Webflow Mistakes 101 ebook: www.fitrmedia....
Clone the accordion from this video:
webflow.com/ma...
In this video Michael ( ‪@bmichaelgroff‬ ) will show you how to make an accordion in Webflow. Accordions are commonly used in sections like FAQs. While accordions aren't super complex, they do have quite a few moving parts, but no sweat, after this video you'll be a pro at making accordions!
Webflow development:
www.fitrmedia....
Need Webflow consulting?
www.fitrmedia....
#fitrmedia #webflow #startups

[@DiegoMendezM]

Awesome as usual! Thanks and greetings from Costa Rica, Pura Vida 🇨🇷

[@balloonartisan]

I loved this so much I'm commenting again haha! Thank you so much!

[@DaTruthHurtzzzz]

i came here to learn about the accordion and not only learned that but a few other subtle things you did. thank you

[@famosly]

same here

[@erwanliebot8810]

Great video thank you ! How do you add easing to the animation ?

[@ValoremPaethai]

try to solve this problem for 3 hours now untill i found you video, thank you so much for doing this thing, thank you

[@maferfalla]

wow! super great tutorial! I saw a lot other videos on how to create a FAQ section in weblow but not one near as easy and well explained as yours! Congrats and thank you a lot!!

[@fitrmedia]

Glad it was helpful!

[@emmaconsult7267]

easy and straightforward. thanks

[@sewerlamb]

The accordion webflow link isn't actually cloneable because I can't open it in the editor - only in the live site

[@abdulbasitsadiq3413]

This is superb and straight to the point. Thanks man.

[@fitrmedia]

Anytime! 👊

[@avaliemedia3143]

thanks so much for this! awesome video and I'll be using this in the website I'm building for my client. Cheers!

[@tomiisan8g155]

Quick and to the point! You just saved me a lot of time, thank you!

[@smileordiexxx]

Thanks bro! Only video that did exactly what I was wanting 👌

[@YoonahBae]

Thank you so much! You explained it so well.

[@Aorta_inc]

Amazing tutorial, thank you!

[@eouyang6383]

Thank you so much for sharing! and one question, where is the link of html embed you mentioned in the video?

[@manarelnemsa]

Thank you, you helped a lot.

[@Agence_Inconnu]

In my case, when i open a single row, they are all opening.
Is there a solution please ?

[@pranchaluniverse]

thanks foe teaching us🙏🙏 Namaste

[@lguiraldeli]

Please, Where can I download the script from, used in tutorial? Thanks

[@iartfromstars]

Thank You

[@unleash6290]

This was super helpful! Thank you!

[@user-jf4td1tm6n]

This is fantastic. I'm fairly new to webflow as a whole, but I had a question- When I look at the accordion in mobile view, I see that the icon is smaller depending on the amount of text in the question. I'd like the accordion icon to remain stagnant in size across all of the questions, regardless of size. Is there a way to do that

[@dadarkar]

Thank you so much! This was of great help. I have got it to open, but it doesn't close lol.

[@dadarkar]

Solved it!

[@juanquintero1618]

how@@dadarkar

[@tejurai5872]

thanks, great help

[@Applecitylightkiwi]

v good

[@shohanurrahman6102]

I have a question. Can I add a sort of easing effect so that the accordion panel opens a bit more gracefully? Right now it just pops open instantly in one click and that imo looks a little odd for my design. The easing part is greyed out in hide/show interaction.
Awesome video btw! Please make more of such tutorials.

[@james.kaloki]

I have the same problem did you figure it out ?

[@Adam326]

same

[@beta_byte]

I know this is old but in case anyone else comes to this video and ends up with the same question: instead of changing the panel's display to hidden, select the trigger, add an animation, select the panel and instead of changing the show/hide atribute, change the size and add an initial state of 0 height, then add another keyframe and change the height to Auto, this will allow you to add any effect you want. Hope this can help someone.

[@prosperiteeclothing4287]

Hey just wanted to say a big thank you to you! Was looking for how to do this and you gave such a great answer, just created my own customization all thanks to your help! Appreciate you so much!@@beta_byte

[@beta_byte]

@prosperiteeclothing4287 glad it helped man cheers

[@james.kaloki]

Hey awesome video is it possible to add timing(duration) to hide/show animation cause im seeing on webflow its refuisng

[@Yala-br]

great video bro, can you help me? how can i edi the panel block?
i cant select it

[@oarabileseoke4141]

A million thanks bro, this is the best accordion tutorial I've come across Lemme sub

[@yannyimo]

No smooth animation, not very cool for the UX

[@Svun567]

It doesn't show the hide/show option when i select class as affect

[@auroraflash]

Does this take away 2 page elements per question + amswer?

[@rociogarcia1121]

I have problems finding the display block when I want to make the animatiom. That section doesn't appear in my panel.

[@samuelsegun1171]

Bro, I'm facing the same problem. this isnt good

[@rociogarcia1121]

@@samuelsegun1171 I solved it by disabling the taskbar and resizing the screen with the zoom because the functionality is actually there. The problema is that it's hidden from view.. I hope it helps!!

[@samuelsegun1171]

@@rociogarcia1121 Oh, alright. Thanks

[@samuelsegun1171]

@@rociogarcia1121 it did bro, thanks

[@rociogarcia1121]

@@samuelsegun1171 Good for you! I'm glad it worked !

[@adamhaile1]

brev this is not an accerdion. This is a dropdown. accordion closes when you click on another accordion.

[@famosly]

you learned me something new today, thx

[@karoltruszczynski6557]

Am I doing something wrong or it can't be opened?

[@annanguyen8997]

No option to open the webflow file :(

[@Applecitylightkiwi]

please vote this comment up!
if you notice that only one accordion is working but others not please check if the animations you selected work by class and not by element.

[@emaeshka]

like

[@meganergle8665]

@FitrMedia The cloneable site is not cloneable