How to make an accordion in Webflow | Free cloneable included

Get our free Webflow Mistakes 101 ebook: www.fitrmedia.com/webflow-mis...
Clone the accordion from this video:
webflow.com/made-in-webflow/w...
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.com/
Need Webflow consulting?
www.fitrmedia.com/services/we...
#fitrmedia #webflow #startups

[@sewerlamb]

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

[@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

[@tomiisan8g155]

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

[@unleash6290]

This was super helpful! 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!

[@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!

[@abdulbasitsadiq3413]

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

[@fitrmedia]

Anytime! 👊

[@manarelnemsa]

Thank you, you helped a lot.

[@user-dl8cb2cu3p]

Very Clear and straight! Thank you a lot.

[@fitrmedia]

Anytime!

[@pranchaluniverse]

thanks foe teaching us🙏🙏 Namaste

[@avaliemedia3143]

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

[@iartfromstars]

Thank You

[@tejurai5872]

thanks, great help

[@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

[@Agence_Inconnu]

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

[@eouyang6383]

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

[@lguiraldeli]

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

[@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

[@erwanliebot8810]

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

[@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

[@auroraflash]

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

[@Svun567]

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

[@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

[@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

[@Applecitylightkiwi]

v good

[@annanguyen8997]

No option to open the webflow file :(

[@karoltruszczynski6557]

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

[@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 !

[@yannyimo]

No smooth animation, not very cool for the UX

[@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

[@emaeshka]

like

[@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.

[@oarabileseoke4141]

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

[@meganergle8665]

@FitrMedia The cloneable site is not cloneable