JavaScript Accordion

[MUSIC] 0:00 Hey, what's up? 0:04 I'm Dustin, a developer and technical evangelist here at Treehouse. 0:05 I've got a quick guide for you today on setting up an accordion with JavaScript. 0:09 This will be a step by step guide. 0:13 So if this is something you'd like to follow along with, let's get started. 0:15 So first things first, I'll set up a new project folder on my desktop, 0:19 and I'll drag it to my text editor. 0:23 And as always, I'll get started setting up the files we need. 0:25 I'll start off with an index.html file. 0:29 And then I'll create our style sheet and then our scripts file. 0:33 Once that's done, I'll hop into our index.html and 0:39 set it up with some boilerplate code, and then change our title. 0:42 I'll change it to JavaScript Accordion. 0:45 And then I'll link in our style sheet that we created. 0:48 And then I'll also set up our scripts file that we just created as well. 0:52 Once that's done, 1:00 I'll save our changes to our index.html file and open it up in the browser. 1:02 And now that I see that it's working, I'll set this up to where my editor and 1:08 my browser are side by side so that we can get started building. 1:13 The first thing I'll do is set up our HTML markup structure. 1:17 The container for all of our accordions I'll just set up in a div with the class 1:22 of accordion-container. 1:26 And then each accordion inside will just have a div with the class of accordion. 1:27 Each accordion will have two child elements, an accordion-header, 1:33 as well as an accordion-body. 1:37 So I'll set those up in some divs. 1:39 Inside of our accordion-header, we'll have an h2, and 1:42 we'll just call this Accordion Title. 1:46 And then we'll set up a button. 1:48 And for now, I'll just have a + sign in here. 1:51 For our accordion-body, this can hold any of the content that we want our accordion 1:54 to have, but for this example, I'll just put a paragraph tag with some text. 2:00 I'll hit Save, and now you can see the accordion in the browser, but 2:04 it doesn't look that great, so let's add some styles. 2:08 I'm gonna keep these styles for this very basic. 2:11 And I encourage you to make this your own and style this up just how you'd like. 2:13 So I'll add some styles to reset our browser's default style sheet, 2:18 and then I'll get started with an accordion-container rule. 2:22 I'll add some padding in here, and this is just so 2:26 that it looks okay in the browser for right now. 2:29 The first thing that we can do is target our accordion-header and 2:31 our accordion-body, and we'll give each of them some padding of 1rem. 2:36 Next, I will set up a rule for our accordion-header. 2:43 And what I wanna do is I want the title to be on the left and 2:49 the button to be on the right. 2:52 So this is a perfect use case for Flexbox. 2:54 I'll set it up with a display of flex, and 2:57 we'll justify the content space-between, and we'll align the items center. 3:00 So now, the title and the button are on separate sides. 3:06 I'll give a light gray background-color to our header so 3:10 that we can differentiate it from our accordion-body. 3:12 I'm gonna add a dark background-color to the body just so 3:18 that we can see our accordions a little bit better. 3:21 So the next thing I'll do is I'll target our accordion-body, and 3:26 I'll give it a background-color of white. 3:30 And we should be able to see the accordion-body a little bit better now. 3:36 I wanna let the user know that when they hover over the accordion-header that it 3:41 can be clicked. 3:45 So we'll add a hover effect for this, and 3:46 I'll give it a transition with a background-color of .3s. 3:49 And then accordion-header : hover will give it a darker gray background-color. 3:53 So now if we hit Save, we should see a darker color for 3:59 the header when we hover over it. 4:03 And one more little feature is I'd like to add in a cursor of pointer just so 4:06 that it's obvious. 4:12 Sweet, it works. 4:13 Next, let's style up the button on the accordion-header a little bit better. 4:16 I want to remove the background and border, so 4:21 we'll target accordion-header button. 4:24 We'll set the background-color to transparent, 4:28 we'll set the border to none, and we'll up the font-size to 1.5rem. 4:31 That looks a little bit better. 4:37 I'll give our browser just a little bit more space so 4:41 that we can see the accordion just a little better. 4:44 Now, by default, the accordion's content will be hidden. 4:47 So in the accordion-body, we'll set the display to none. 4:49 So I think that is about it as far as how I'd like to style these. 4:52 So what I'll do is I'll copy the instance of our accordion and just replicate it. 4:56 So now, we have more than one accordion on the page. 5:02 And what we wanna do is we wanna give a class of active to the accordion itself. 5:05 And that class will be toggled on and off with JavaScript. 5:11 But when our accordion has a class of active, 5:16 we wanna target the accordion-body. 5:19 So we'll write a rule for accordion with the active class and 5:21 the accordion-body, and we'll give it a display of block, which will override 5:25 the display of none that we set up in the original accordion-body rule. 5:30 So we can test this by giving a class of active to one of the accordions, and 5:35 you'll notice that we can now see the accordion's content. 5:39 So let's remove that class from the markup, 5:42 because we'll do this with the JavaScript. 5:45 So in our JavaScript file, let's first get every instance of our accordions. 5:48 We'll put this in a variable, so const accordions = document.querySelectorAll, 5:53 and we'll use the class of accordion. 6:00 And what we'll do is we'll run a forEach loop on this variable. 6:03 So we'll write accordions.forEach, and we'll set up a variable for accordion. 6:08 And in here, 6:15 we'll basically want to toggle the class of active on each accordion. 6:16 So we'll do accordion.classList.toggle('active'). 6:22 But we wanna do this when we click on an accordion. 6:26 So we'll run this inside of an EventListener. 6:29 So we can use our accordion variable and write accordion.addEventListener('click'). 6:32 And inside of the function, we'll write accordion.classList.toggle('active'). 6:39 And if we hit Save, 6:47 we should be able to click on each accordion and see the accordion's body. 6:48 So it works. 6:52 One more small feature that I would like to implement is whenever an accordion is 6:55 open, I would like that button to change from a plus sign to a minus, and 6:59 it's actually pretty easy to do. 7:03 So if we hop back into our JavaScript, 7:07 we can set up a variable for the accordion's button. 7:10 We'll call this let accordionBtn = accordion.querySelector('button'). 7:15 And we can run a simple if statement to find out if the button has 7:24 the plus sign or if it has a minus sign. 7:28 And we can do that by writing if (accordionBtn.textContent === '+'). 7:31 Then we want the accordionBtn.textContent to equal a minus sign. 7:39 Else, we want the accordionBtn.textContent to equal the plus sign. 7:46 So let's hit Save and see if this works. 7:56 I'll go ahead and click on an accordion. 8:00 Sweet, the button turns from a plus sign to a minus. 8:03 And then when I click on it again, it goes back to a plus sign. 8:07 Great work, we just set up an accordion with JavaScript. 8:11 Though this one is pretty basic, the possibilities are endless for 8:14 what your accordion can do or how it can look. 8:17 So have fun with it and make this your own. 8:19 Until next time, have fun and happy coding. 8:22

You need to sign up for Treehouse in order to set up Workspace

Sign up