Build an Accordion Menu with React & Tailwind CSS

what's going on you guys CL welcome back to the channel C Commerce and has been a while but in this video I'm going to show you how I built this accordion little drop down menu in react using tail1 CSS I was actually using this on a personal project and I thought it was pretty cool so I just wanted to share it with you guys so without further Ado let's go ahead and get started so here I am in VSS code and I'm already in the folder I'm going to be working in just this accordian dyoutube so what I want to do is actually install react so I'm going to be using VJs and Tailwind so let's go and install V I'm going to type npm create vit we'll say at latest then I'm going to go ahead and install this in the current directory so vanilla view we're going to be using react so I'm going hit react let's go down and use JavaScript with a speedy web compiler next I'll go and type npmi or npm install and that's going to install all of our necessary dependencies here all right super fast super easy to use let's go and type npm runev to go and start up our development server so yours will probably be on 5173 mine's on 5174 so I'll say Local Host 5174 for and this should be what you see on your screen here let's go into the source folder uh we'll go into app.jsx and we can actually get rid of the state we can get rid of all that and we're actually going to just delete everything in here so it's just going to leave us leave us with this blank screen there we can delete this app. CSS let's go and move to trash all right and what we want to do is actually install Tailwind CSS so I'm just going to close that demo there let's go to Tailwind css.com go ahead and click on get started and we're using a framework we're using vit so click on framework guides and we'll just find vit right there so a few steps here the first one is actually create our V application which we've already done next is to install Tailwind so I'm going to copy this one here we'll go ahead and stop our server there let's paste that in there all right that's going to install Tailwind next we'll copy over this Tailwind CSS and knit we'll go a and paste that in uh and that's going to be creating this Tailwind doc config file here so go ahead and open that one up cuz the next step here is actually to copy this inside of the content array here so let's just go ahead and paste that in there whoops got too much of it let's go ahead and get that there we go we'll paste that in there go ahead and save awesome then the final step here this uh all these uh tail one directives we just need to copy those let's go ahead and paste that inside of our index.css I went ahead and just pasted all over everything uh since we're not going to use any any like custom styling as far as the inside the index.css file so that's it you guys let's go and type npm runev to go and start our development server back up now uh we can close these files here you should just see a blank screen there so if we go and type like an H1 for example say hello we're just going to see this uh text right there it's not bold it's not large and that's what tail1 CSS does kind of applies some baseline Styles if you want to go in here and say a class name font bold something like that you can say text uh 2XL it's going to be a little bit bigger that's kind of how Tailwind works so let's go ahead and remove that okay so the way we're going to use this um one of the reasons we use react is because we can use reusable components going to and we're going to be able to reuse this accordion throughout our application wherever you need it so let's go ahead and inside of our source folder create a new folder called components and inside here we'll create I'm going to create a like an FAQ for example. jsx we'll say RF CE and then we're going to have our actual accordion. jsx okay so ra a fce there now inside here let's go ahead and import our accordion we'll do that just whoops let's go ahead and save that and then if we put this in here our FAQ for example we have our accordion bringing in our our accordion here and then we have our accordion text in there so let's go ahead and give this make it a little more fun we're going to give some background here so we'll say div and div there we go um whoops there we go all right so let's give this a class name we're going to be using some Tailwind for our background we're going to have like a nice gradient so what I'm going to say first I'm going to say width full I'm going to say h screen that's saying width 100% a height 100 vport Heights here and we'll say BG gradient to right there we go and we'll say from and you can use whatever you want I'm going to say from Indigo we'll say 500 to blue 600 something like that let's go and save and we have this nice kind of gradient guys think that's how easy tail one is you guys that would take a lot of time if you were just um writing some CSS like that right so I mean not a ton of time but it would definitely take a lot longer than that that's for sure so I'm going to get wrap this up here and give it just a little bit of padding there and uh that's going to be all we need to do there so next let's go into our FAQ here and I'm just going to give this here I'm going to give this a little class name here and what I'm going to say I'm going to say p p-4 I'm going to say BG gray 200 I'm going to say rounded large and that's going to give it just a nice little background uh that you see there so that looks pretty good there next let's actually go into our accordion component okay we're actually going to code out the accordian and all all the uh logic that we're going to be using okay so first off I'm going to give this a class name I'm going say p y-2 and what that saying is giving padding on the Y AIS on the vertical axis of two which is only um should be 8 pixels we hover over this is a Tailwind intellisense plugin not sure if you can see that but whenever I'm hovering you get this nice little like preview of what the Tailwind is so definitely recommend um adding that plugin to vs code if you're going to be using some Tailwind CSS okay so we're going to have a button in here and then on our button we're going to have a span and this will be our um this is the title something like that and then down here we're going to have just below this we'll also have um a span and this is going to be like a plus or a minus there you go and let's just go ahead and give this a little bit of styling so I'm going to say Flex justify between then we do need to say width full so it kind of gets spread to the opposite ends of the screen so there you have it looks pretty good there um so next let's go ahead and I'm going to add just below this button here I'm going to create another div then inside this div we'll have a div and this is going to be we'll say this is the the answer or however you want to do it so what we want to do let's go ahead and we're g to have some state in here okay so let's go ahead and we'll say UST State we'll import the UST State hook now for our state you can call it whatever you want we'll say con I'm going to say here um whoops we'll say accordion open and set accordian open just like that and we be equal to use State and by default we'll just set it to false okay there we go now let's go down here to this div down here okay and what we want to do here let's give this a class name and what we're going to say we're going to get rid of these quotes we're actually going to have some state in here and we're going to apply styling based on the state so if it's true we're going to add uh styling certain styling and if it's false we're going to have some different styling so what we're going to say here is open up our back tick buttons here what that's going to do is allow us to have some kind like Dynamic uh CSS or dynamic Tailwind in here so we'll say grid want to say overflow hidden we'll say transition all want duration of 300 and we'll say ease in and out and this is just to have uh a little bit of smooth transition here you don't have to do this and we'll say text slate 600 then text small then we're going to do here is open up our curly brackets here and we're going to say if the accordion open is true then we're going to have some styling else we're going to have some different styling so if it is true what we're going to say here we'll say grid rows open up our brackets here and whenever you open up brackets and Tailwind you can actually use custom values okay and so we're going to say this and we'll also say opacity let's tap it out 100 else I'm just going to copy this here'll paste that in there else we have grid rows zero and the opacity will actually be zero as well so let's go ahead and save that and for this div here it's kind of still giv us some space in there so we just need to change this div here I'm going to give a class name we'll say overflow hidden there we go all right looks pretty good of course we can't do anything yet we don't have any functionality so let's go ahead and we're going to add our functionality in now so what we're going to do we're going to go into this button here and what we're going to say is on we're going to say on click and we're going to run this little function here whoops accordion we're going to run our function and and all we're going to be doing here is just set our accordion open to the opposite opposite of its current value so accordion open um it's currently set to false whenever we click this we're going to set it to true so on and so forth now this span here what we can actually do is we'll say accordant open if this is true then I'm just going to copy this if the accordant is open if the accordant is open we probably want to show like a minus button otherwise we'll show a plus button so if we go and click on this and actually we can click anywhere on this and we don't have to click on the button we put this on or we put this functionality on the button itself so this is the entire button so whenever we click we we show this is title this is the answer so pretty cool uh I'm going to go ahead and copy over this SVG here I didn't want to type it all out svgs they're kind of confusing it's a lot but um if we go and put a comment over this and I'll go a and paste this in here like so and what this does just looks a lot nicer a lot cleaner a lot more professional this is what I'm using in my personal project um I'm going to throw this up on GitHub so if you want to clone this and just copy this over feel free to do that and here's all just a little bit of uh Tailwind logic in there that you can use okay so but before we're done this isn't very re reusable here because we just have some hardcoded uh answer and title in there and that doesn't make any sense so let's go back to our FAQ here and what we're going to have I'm going to give this some properties okay so I'm going to give a title here and then also we'll say an answer and we'll just say do you prefer Android or iOS I like to use iOS products something like that and let's go aad and copy this down and this one will be do you prefer writing CSS or Tailwind I'll say I like to use Tailwind of course and then what's this one going to be Firebase or super base yeah I'm actually working on a super base project right now not I don't think I'll make a video on it it's just personal project but I am using super base Okay cool so let's go ahead and save that and of course we're not getting anything right here we're just getting our hardcoded values so let's go into our accordion here make that a little bigger if that helps you guys now that we're towards the end of the video so we actually have to accept these properties so again we have a title and we have answer okay so what we'll do in here we'll say title and answer just kind of accept those properties we're just passing them down and inside here instead of the title we'll just open our curly brackets and we'll say title there you go and we'll do the same thing for answer ENT there we there we go so now do you prefer Android or iOS I like to use iOS products everything is unique how about that awesome you guys now also I want to show you one more thing here so let's go to our FAQ or even the app the homepage here um if we want to put some text below this for example uh I am below the accordion menu it's just going to push everything down that's what I wanted to show you guys so if we expand this it actually just pushes everything down nothing gets covered up so everything is working uh flawlessly there so I think that's going to be the video you guys smash like button if you feel like you got some value out of this I'd appreciate it I'm going to put a link down in the description below to the GitHub so if you want to want to clone this or go grab any of the code please feel free to do so thanks for watching you guys smash the like button and I'll see you on the next one

Channel: Code Commerce

Views: 6,501

Keywords: web developer, html, css, javascript, tailwind, react, accordion

Id: oOXExNA8A48

Length: 12min 50sec (770 seconds)

Published: Mon Nov 27 2023