Let's Build a FAQ Accordion with React, Framer Motion and Tailwind

what's up guys welcome back to another video in this video we're going to be creating a frequently asked questions accordion with framer motion react and Tailwind so let's get started I'm going to try to make this as fast as I can because I know you guys like these fast tutorials already got my project up in here I have react icons installed firmer motion tailwind and I'm using Veet right now so I made this accordion on my uh e-commerce site that I just uh dropped so if you guys want to go check that out you can see the same exact one let's go ahead and import new state state from react and we're going to import some stuff from firmer motion I'm gonna do motion and animate presents presents and this is going to come from frame or motion and we also going to import two icons a plus icon and a minus icon let me go ahead and paste that in there and I'm getting some errors oh I forgot to do comma all right so let's go ahead and do some State we're going to do cons active question and a set active question and this is going to equals your state and the default value is going to be null right so let's go and write some jsx actually before we do that you're going to need an array with an ID question and answer I did five of them and like I said it's the same exact one for my um e-commerce site I'm just gonna go ahead and paste it over here so you just want to make an array questions array and have ID I have a question and have an answer now I did five of them so just we want to pause the video and just type that up right quick you can it's going to write some jsx so I'm going to do a div just so I can get rid of this little white background I'm just gonna probably do like a black divs do a class name uh with screen okay height of screen BG of black and a flex adjustify Center and item Center just so it can be nice and centered it's going to save that all right so let's go and start on our accordion now we'll do a div and we're gonna do a class name I'm using a new keyboard right now man it is I don't like it I was gonna do with 89 percent do a margin of Auto I'm gonna do a Max with a 1400 pixels uh okay and we're also gonna do like a BG of gray let's do grade 300 and we also gonna do a pattern of eight a rounded of LG a shadow of MD and I believe that's it for that div so it's nice and centered that's what we want all right so in this div I have a H2 and this is going to have a class name of text 2XL the margin bottom of six and a font of semi bold like that and this is just going to say frequently ads questions all right cool and right under this we're going to map to our array of questions so we're going to do brackets and we do questions .map and you can name this whatever you want I'm just going to do Q you can name it question if you want and we're going to return some DSX so make sure you do parentheses and in here we're going to have a div and we need our key tag so we'll do a key and it's going to be Q dot ID and this is also going to have a class name a margin bottom four and we're also going to do a last of margin bottom zero so what this does is basically for the last child we want it to have a margin bottom zero because uh I mean self-explanatory all right so inside this div we're going to have a button [Music] and I'm gonna make some space because it's gonna be a long class name I'm gonna do a class name of with full a text of left text Excel Focus of outline none I'm gonna do a padding of four a BG of gray 400 us actually do gray 100 around it of LG shadow of MD I'm gonna do Flex justify between item Center and now you can see we got all of them there so it's looping through our array I mean our questions so we got five so it's five boxes five divs oh five buttons sorry all right so inside this button I actually must add an on click on here let's go we're gonna do it on click and this is just going to set our current question let me set our active question to our active question so if our active question triple equals our Q dot ID we want to return null so we just want to return our Q dot ID which is our question.id so we're getting the error here um I'm using typescript I always use typescript I'm sure you guys probably don't have typescript installed right now but if you do to get rid of that error all you gotta do is come up here to the use state and just do number or no like that and that should get rid of that error down here all right so inside this button uh we're going to have our Q dot question you can see our questions popped up and we also want our icons so right underneath our question we're going to render this out conditionally so we're gonna do a bracket and do with active question triple equals our Q dot ID we want to return our minus symbol so f F A minus and then else we just want it to return our plus F A Plus like that all right so as we click it turns to minus plus minus plus nice all right so right after this button this is where we're gonna have our our um animation so we're going to animate presence like that and inside here we're gonna have we're going to render some more stuff out conditionally and do active question triple equals to our Q dot ID we're going to return a motion dot div probably should have put that in Brackets um motion div all right so in here inside of this motion div we need to set our animation so we're gonna do initial our initial is going to be make sure you do double brackets so initials opacity is going to be zero and the height is going to be zero and then on our animate double brackets again our opacity is going to be one and our height there's going to be Auto because we don't know how big you know the answer could be so you don't want to set a height for it and then um for we need to do a exit so for our exit double brackets our opacity is going to be zero and our height is going to be zero like that all right so we got our animation so this also takes a class name as well let's do a class name of margin top two and a text of Gray 600. and then we also do a margin left of four all right so we get an error for some reason let's see oh we forgot the URLs that's why all right um and I kind of did this wrong so instead of active question active question equals qid we're going to do and the double and symbol like that so this is basically short circuiting so if um the first half is true that means the second half is going to fire if the first half is false then it's just going to Short Circuit out and won't even run the second half so that's what that is so inside let me go and save that so inside of this motion div all we're going to have is a P tag with our Q dot question answer sorry and I believe that's it once we click on it oh oh I did something wrong all right sorry guys I need to learn how to spell it is with the c presents there we go all right so that should work I want to save that and it's going to refresh and now once we click now we get the effect I do apologize for that so yeah that's it for this video try to make it as fast as I can thank you guys for watching see you guys next video peace [Music] foreign [Music]

Channel: Antonio

Views: 1,621

Keywords: tailwind faq, tailwind react, react accordion, tailwind accordion, framer motion react, framer motion tailwind, tailwind animations, framer motion accordion, vite tailwind, tailwind vite, react faq, tailwind faw, accordion faq, react faq accordion

Id: v3kQAwr23E8

Length: 10min 53sec (653 seconds)

Published: Sun Aug 20 2023