Create an Accordion Menu with CSS8:51 with David Conner
Learn to create a content accordion menu using CSS. Content accordions are great for when space is limited and you have a lot of content that you want to present in a cleaner fashion.
[SOUND] Hi everybody. 0:00 I'm Dave Conner, a designer and front-end developer. 0:05 In this treehouse workshop, 0:08 we are going to learn how to create a content accordion using HTML and CSS. 0:10 Content accordions are great when space is limited and 0:14 you have a lot that you wanna present in a cleaner fashion. 0:17 For instance, if you had a bunch of questions in the FAQ page. 0:20 By hiding the answers in a constant accordion, more questions would be visible 0:23 on the screen at one time, allowing them to be more easily scanned. 0:26 This is just one of many use cases for accordions. 0:30 They've been around for a while, and they are very popular. 0:33 Most solutions use Java Script to handle toggles, but 0:36 we will be sticking with HTML and CSS. 0:38 The technique that we're about to learn employs radio input elements and 0:41 their check pseudo class along with some sibling selectors. 0:44 So let's get started, and see how this is done. 0:47 Let's take a look at what we will be building. 0:50 We have a nice looking accordion here. 0:52 When you click on one of the tabs, we get a smooth slide toggle animation. 0:54 Click on another one, the last one closes, and the new one slides open. 0:59 Let's begin with the mark-up. 1:04 We will be starting off with index.html. 1:05 You can see it's just a blank page so far. 1:07 We will first add a div for our accordion wrapper. 1:10 We will give it a class of tab-group. 1:15 Inside our tab-group, we will create the first tab of the accordion. 1:18 So we will write another div and give that a class of tab. 1:24 Now, each tab will get one radio input and one label. 1:30 The label will be both the label for our input, which will be hidden, and for 1:33 the tab of the accordion. 1:38 Let's create an input and give it an id of tab one. 1:39 The type is radio and the name is tabs. 1:46 This is part of the tabs radio group. 1:53 After that we will write our label. 1:57 We'll set the four attribute to tab one to tie it to the radio input and 1:59 we will write our text which will be label one. 2:03 Next we want to add the wrapper for our content. 2:09 We will use a div and give it a class of tab-content. 2:12 Inside can be any element that you want to display, text, images, you name it. 2:22 We will just add some text. 2:27 I'm going to pay some so we have something to see. 2:28 And that's it. 2:33 Our tabs have three main components. 2:34 We have our input, our label, and our content container here. 2:35 I'm going to copy our first tab and paste it a few more times [SOUND]. 2:42 Then go ahead and change our id and four attributes on our inputs and labels. 2:48 These all must be unique so we will do tab two, 2:53 [SOUND] [SOUND] and label two. 2:58 [SOUND] Then tab three, 3:01 [SOUND] label three. 3:06 And finally, tab four. 3:11 So now we have four tabs in our accordion. 3:19 We will save this, and that's it for the markup. 3:21 If we needed to add another tab we would just add another one of these divs 3:25 with a class of tab and its children. 3:29 Pretty straight forward. 3:32 If you look at this in your browser you will see it's not quite an accordion yet. 3:33 We need to add our styles but you can see all our elements for each tab. 3:36 So we have two style sheets linked in our head, 3:42 style.css is just some boiler plate code for the demo, nothing too fancy. 3:46 The other style sheet accordion.css is where we will be writing our styles. 3:50 Opening it up, we will begin with our tab-group wrapper. 3:55 We are going to center it so we will add margin zero auto. 4:01 We will give it a width of 100% and a max width of 40ems. 4:07 So, our accordion will be full screen on smaller devices, 4:15 then center itself on the page when we get above 640 pixels. 4:19 For our individual tabs, we want them to be one 100% of it's wrapper, and 4:23 any positioning we do, we want it to be relative to the tabs themselves. 4:27 So we will position it relative, and set the width to one hundred percent. 4:31 Our radio inputs are going to be hidden, so we will position them absolutely. 4:41 [SOUND] Then set them to the top left corner, 4:46 and use zee index to push them way to the back and out of the way. 4:51 We will be using an input label to toggle the radio button, so 5:05 when we click on the label, it will reveal its adjacent accordion content. 5:08 I will use the hex value to set the background to a nice teal color. 5:16 We will set the color to white so it has a nice contrast with this darker background. 5:23 We want the label to span the entire tab, so let's make it display block. 5:32 Then set font weight to bold and line height to three. 5:39 This line height will give us more of a clickable area. 5:46 Next, we wanna add some padding, to get it off the left corner and 5:49 give it a bottom margin, so we have a little space between tabs. 5:52 And lastly, we are going to add a transition on our letter spacing Just so 6:00 it draws the eye when we focus or hover the label. 6:03 Now we will add our focus and hover styles. 6:13 So when the input is focused or the label is hovered, 6:24 we will lighten the background and change the letter spacing. 6:26 Again, just to draw the eye to it. 6:39 Next is our tab content. 6:41 We will be hiding our content divs by setting a max height of zero and 6:47 overflow of hidden. 6:50 Then we will add a transition so when our tab is chosen,the content expands 6:55 with a nice slide transition instead of a jerky opening. 6:59 [SOUND]. 7:02 [SOUND] Next, we will add some margin for our paragraph and our tab content div. 7:05 Now all we have left is to write our styles that will open our tabs when 7:17 our radio inputs are selected. 7:20 For this we will be using the check pseudo class. 7:22 So, for our selector, we are going to write tab Input checked. 7:25 We will then use a general sibling combinator and then the tab content class. 7:32 So we are targeting the class of tab content, 7:42 which is next to an input that is checked inside the class of tab. 7:45 And for this we are just going to increase the max height to 6.25em. 7:50 Unfortunately we cannot transition a height from 0 to 100%. 7:57 We are getting around that by transitioning the max height. 8:01 So we set this value to the height of our largest accordion tab. 8:05 That way we are only opening our tab as far as the content needs but 8:09 still allowing for differences in height. 8:12 That's it for our styles. 8:15 We will save this and go back to our browser. 8:16 Hit refresh, and there you go. 8:19 We have a working content accordion. 8:21 So, there you have it. 8:28 With just a small amount of HTML and CSS, we have a fully functional accordion menu. 8:30 The radio inputs are a great alternative to Java Script, 8:34 because they bring in the tab and arrow key controls with them by default. 8:37 There are a ton of things that we can do to improve on this design, and 8:40 I would love to see what you guys can come up with. 8:43 Well that's it for this workshop. 8:46 I'm Dave Connor and I'll see you next time. 8:48 Thanks for watching. 8:49
You need to sign up for Treehouse in order to download course files.Sign up