FAQ Accordion (from CMS) in Webflow in 7 min
HTML-код
- Опубликовано: 3 авг 2024
- 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
👉 try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
00:00 What it is
00:10 Project Setup
03:03 Interaction
06:24 What this needs is a box shadow 
Хобби
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?
You'll need Javascript for that! Here's a cloneable I just whipped up for ya. Note I changed the answer div to grid so I can animate it with grid-template-rows. height 0 -> auto doesn't animate with CSS transitions (check my CSS hack video).
Cloneable: webflow.grsm.io/cloneable-is-bae?sub1=cms-faq-accordion-one-at-a-time
On animating grid-template-rows with CSS transitions: ruclips.net/video/ZBGsrAQJGfw/видео.htmlsi=Luq86jv7vuFjVb1O
Super helpful, just what I needed! Thanks!
Glad it help Greg!
Well presented thank you Bae
glad it helps!
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!!
Great tip!
They don’t want you to jetski!!! The DJ Khaled Easter eggs are too good
We are on this Earth to jet ski
Too easy! Keep it coming.
Nice. I have to try this out
Nice tutorial! Very professional.
Glad it was helpful!
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!
Glad it helped! I think there might be a good way to do it with the drop downs as well but haven’t looked there in a while haha. From what I remember the nice thing about the drop downs is that the only one stays open at a time without needing any custom code.
So well explained! Thank you so much!
Glad it was helpful!
Thanks alot, great tutorial
Glad it was helpful!
fantastic tutorial!
Thank you! Cheers!
Great tutorial!!
thank you! glad it helped.
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)
you'll need to ensure the interaction is only on whatever element wraps the question. (i.e. answer cannot we nested inside). hope that helps!
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!
You might need to double check how you are targeting elements (by class, selected elements, etc.)
For anyone struggling with this, ensure that the interaction is targeting "collection item". Had the same issue with them all opening at the same time, but changing the targeted class from "collection list" to "collection item" resolved this!
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?
I haven’t had luck doing it with Webflow IX. Tim Ricks has an example of how to do it with jquery here: ruclips.net/video/MlbGahCU_mo/видео.html hope that helps.
hey, did you ever find a solution to this problem? :) @niLmagikero
Is it possible to make the first item of the accordion open while others closed inside a CMS?
You can do with Webflow dropdown elements or a little bit of Javascript. Check the pinned comment for a cloneable.
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
gotta use javascript for that!
But how do you set it up so that you can add more accordion sections via the CMS?
Just add a new record in your CMS and it will populate automatically.
@@webbae Cool. Thanks mate
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?
Change the interaction trigger from the Collection Item to the question-wrapper and you should be good to go. Let me know if you need any help with that.
@@webbae I tried that but now the ‘answer’ won’t close, all I changed was moving the entire interaction from the ‘collection’ to the ‘question’
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!
Check your affected elements - you probably have one set to “all elements with class” also check the target for your answer boxes. You can bounce your build off the cloneable in my build.
@@webbae Thanks so much for your reply! This was it - I had to change to effect only children in the class. You rock!
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.
Glad you got it working - thank you for the feedback as well.
✌✌✌✌✌🙏💪🏽