Start a free Courses trial
to watch this video
Accordions are everywhere on the web and even in mobile apps. They’re an effective way to show and hide content based on user interaction. In this guide, I’ll go over how to create an accordion using HTML, CSS, and a little bit of JavaScript.
Related content / resources:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up