Building a Basic FAQ Accordion in Webflow: A Step-by-Step Tutorial

in this video I'll teach you how to create a basic FAQ accordion let's get straight into it in this example website Whistler Street tattoo.com fqs and I've done a website review of this website that I created you can see we have an FAQ accordion so when the user clicks onto specific items it then opens up and it plays this really nice animation where it goes from a plus to a minus uh we are not going to do this in the the tutorial but we will do a simplified version so if you understand the premise you can actually do whatever you want so let's go ahead and jump into the web flow all right guys right now I'm in webflow and I just have a header one that says this is a FAQ accordion so let's go ahead and custom built this from scratch so what we need to do is let's go ahead and drag a dip block cuz that's where everything starts let's always name our class and not be a nuob and let's just call it FAQ wrapper from here I might just give it a top parting a top margin sorry of like three Rams and then from here what we can do is add another div block and call it FAQ D item and then in this FAQ D item we want two things we want a question and we want an answer so let's go ahead and add another div block code FAQ question and what we can do here is just copy and paste this FAQ question div block that we just created and then we can go ahead and just rename this by clicking this arrow and hitting duplicate class and going ahead and clicking fa aq- answer so now that's done what we can do is we can go ahead and just add a text block or a header block um for SEO purposes in this example I'll just put a text block and then with this text Block it's currently sitting inside FAQ D question so instead of putting a class in this text block which is just redundant and not really efficient you can if you want we can actually just style the parent div block which is FAQ question so let's go ahead and just make this let's just say 3.2 RS or if you're using pixels you can do that let's put the height as 1.5 unitless height um this is looking way too big let's go ahead put it 2.2 maybe 1.8 we do 1.8 and then you know we'll just change the color to like red just because and then that's it so we can go ahead and go to the FAQ answer and just go ahead and add a paragraph text or just a regular text I've added a text and now because I've added a text I can go ahead and install it I'll put this as 1.1 RM in size height 1.5 unitless height and that is it so what I can do from here is I can go ahead and just give it a name so you know who is Mr Robot cuz we don't know now we can actually put the answer in Mr Robot is Ramy Malik the actor LOL so that's it so once that's done what we can do from here is go to FAQ item go ahead and apply Flex we can Flex this to the vertical and what this allows us to do is apply something called Gap so because right now we have this FAQ item which is the parent holding FAQ question and FAQ answer we can actually put a gap of let's just say two RS that way it just spaces it out let's put 1.5 and that's it so now what we can do is we can just style this even more with the FAQ item we can put one REM padding on everything and we can go ahead and put a background color of let's just say white and we can go ahead and put a radius of let's just say one ram and that's it so you can style it however you want but what we also need to do is to add that L file and in order to do this let's go ahead and just go to lyf flow.com and this is a fin Suite solution and with this website which I'll leave in the comment you can scroll down and you can actually go ahead and go to FAQs or accordians by clicking drop downs right here and this is just a solution that gives you different animations so you can go ahead and just select one let's go ahead and select drop down five cuz it looks pretty cool and obviously this is just one website you can go ahead and you know custom do this uh but in this case I'm using a l so let's go ahead and download this and once that's downloaded I'm going to go ahead and just drag this for my computer to here and then here we can just go ahead and give this a class of Arrow cordan and we can go ahead and just give it a size let's just say one r or maybe 1.5 height and and 1.5 R width and then from here what we can do is we can put flex and put it to the center again this doesn't have to be a l so a l is just a bunch of images compiled together it's like a video file it's like key frames this can also just be a static plus icon or a static di block with a background and you can animate everything so I'll explain everything but as long as you understand the premise of what we're doing that's that's all that really matters so right here with FAQ questions we now have this text block which is the question I've just dragged to the top then we have the Accord right now they're sitting on top of each other because by default that's how web works so let's go ahead and go FAQ questions apply flex and we can go ahead and put this two space between which pushes them aside and we can go ahead and put the alignment to the center so once that is done everything looking good so obviously you can fine-tune this but this is not the tutorial on fine tuning I'm going to go ahead and click FAQ item and then just past it a couple of times inside the wrapper and you'll notice there is no spacing so again in this FAQ wrapper we can apply Flex We can put it to vertical and we give it a gap of one Rim so what I've done here is just putting a gap between all the items which is inside FAQ wrapper so similar principle of what we did right here with FAQ questions and FAQ answer and again this is web so really you could have done this by adding a bottom margin so just as long as you understand the premise all right once that's done we can go ahead and animate everything now so what we can do is with fa2 items selected we hit interaction hit plus and then hit Mouse tap cuz we want the first animation to play to open the accordion so right now what we can do is we can hit a new animation and call it FAQ D open and then from here what we can do is we can go ahead and hit the FAQ answer we hit plus and we go hide show and we can hit none we go ahead and hit set as initial State cuz we want this answer to be hidden when when everything is loaded so the initial state so make sure this is ticked right here and you'll notice there is there is different options like all elements children Etc we want this to be children because we want to apply it for every single item so instead of manually adding this custom animation that we're going to set up right now we can just hit children which we're can apply the effect to the class so the next thing we want to do is we want to start the opening so right now what we can do here is hit end and hit hide show with the FAQ answer still selected and now we want to hit flat cuz we now want it so when the user hits this box it's going to show the answer what else do we wanted to do with this Arrow accordion or this ly file we can actually hit the plus icon and we can hit l in the initial state right now you can see it's initial State I just tick this button right here and we go ahead and just select this and move it to wherever it should start which should be a plus so it can start around 65% um again you don't have to use a l then in the when the user clicks on it CU this initial state right here we hit this plus icon hit ly and we want this to go from a plus to a minus so maybe somewhere like let's say in this case it would be around let's say um 0% so this actually goes from 65 back to zero and then from this case what we can do is we can then hit save and that's it so now we can apply this to class we hit on second click Start animation duplicate for open animation and just rename it to close we'll go ahead and delete the initial States right here we go ahead and just reverse everything so this answer we now want to hide it and this ly we want to move from 0% to 65% hit save hit preview you can see now we have accordion if I click on it it opens and it closes just like that and what you can also do is with the FAQ item selected you can go ahead and change the cursor to a pointer and that way when the mouse holders over it you can see it has this pointing animation but that's the premise so again let me just explain it we're going to build everything out and then once we build everything out we're going to apply an interaction to the item and we're going to apply two interactions one is when the user first clicks on it what happens this FAQ item is revealed this ly file goes from a plus to a minus again doesn't look perfect but that's the premise and then when the user clicks on it again it the FAQ answer goes from show to display none and the ly goes back from in this case 65% or 0% back to 65% and then we've just applied everything to class so that's why it's working for everything and that's how you build a accordant so let me know what you think again this is just the main premise if you just understand this premise you can really do anything you can app animations you can style everything but I hope you found this video helpful and if you want to build this into a CMS that's super easy as well you just go ahead and use this component into your CMS if you found this video helpful please check out my website dk.com SLV value and I'll see you in the next video peace

Channel: Derek Siu | Webflow & Web Design

Views: 214

Keywords:

Id: IX0h7Jrv2lI

Length: 9min 50sec (590 seconds)

Published: Tue Jul 02 2024