How to make an accordion in Webflow | Free cloneable included

[@CassietheK]

THANK YOU!! Saved me hours

[@oarabileseoke4141]

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

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

[@preetaakki]

Very Helpful and nicely explained. Thank you

[@Journalderwan]

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

[@sewerlamb]

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

[@lguiraldeli]

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

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

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

[@eouyang6383]

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

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

[@emmaconsult7267]

easy and straightforward. thanks

[@tomiisan8g155]

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

[@Agence_Inconnu]

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

[@avaliemedia]

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

[@Aorta_inc]

Amazing tutorial, thank you!

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

[@YoonahBae]

Thank you so much! You explained it so well.

[@manarelnemsa]

Thank you, you helped a lot.

[@unleash6290]

This was super helpful! Thank you!

[@LiamMatthews-v3v]

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

[@pranchaluniverse]

thanks foe teaching us🙏🙏 Namaste

[@savvase.9809]

Let’s say we have an accordion on a specific page in Webdlow and I want to link a button on that page to a specific section of the accordion so that it opens to reveal the desired text. How can we do that?

[@ram_qr]

brilliant

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

[@Yala-br]

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

[@james.kaloki]

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

[@auroraflash]

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

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

[@iartfromstars]

Thank You

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

[@tejurai5872]

thanks, great help

[@Svun567]

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

[@annanguyen8997]

No option to open the webflow file :(

[@yannyimo]

No smooth animation, not very cool for the UX

[@Applecitylightkiwi]

v good

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

[@magnumXpress]

Having the same issue, I'm wondering if some updates have nixed this function

[@emaeshka]

like

[@meganergle8665]

@FitrMedia The cloneable site is not cloneable