1 00:00:00,025 --> 00:00:05,798 [SOUND] Hi everybody. 2 00:00:05,798 --> 00:00:08,875 I'm Dave Conner, a designer and front-end developer. 3 00:00:08,875 --> 00:00:10,070 In this treehouse workshop, 4 00:00:10,070 --> 00:00:14,530 we are going to learn how to create a content accordion using HTML and CSS. 5 00:00:14,530 --> 00:00:17,100 Content accordions are great when space is limited and 6 00:00:17,100 --> 00:00:20,230 you have a lot that you wanna present in a cleaner fashion. 7 00:00:20,230 --> 00:00:23,060 For instance, if you had a bunch of questions in the FAQ page. 8 00:00:23,060 --> 00:00:26,470 By hiding the answers in a constant accordion, more questions would be visible 9 00:00:26,470 --> 00:00:29,380 on the screen at one time, allowing them to be more easily scanned. 10 00:00:30,570 --> 00:00:33,300 This is just one of many use cases for accordions. 11 00:00:33,300 --> 00:00:36,230 They've been around for a while, and they are very popular. 12 00:00:36,230 --> 00:00:38,520 Most solutions use Java Script to handle toggles, but 13 00:00:38,520 --> 00:00:41,350 we will be sticking with HTML and CSS. 14 00:00:41,350 --> 00:00:44,390 The technique that we're about to learn employs radio input elements and 15 00:00:44,390 --> 00:00:47,830 their check pseudo class along with some sibling selectors. 16 00:00:47,830 --> 00:00:50,530 So let's get started, and see how this is done. 17 00:00:50,530 --> 00:00:52,830 Let's take a look at what we will be building. 18 00:00:52,830 --> 00:00:54,980 We have a nice looking accordion here. 19 00:00:54,980 --> 00:00:59,350 When you click on one of the tabs, we get a smooth slide toggle animation. 20 00:00:59,350 --> 00:01:02,860 Click on another one, the last one closes, and the new one slides open. 21 00:01:04,330 --> 00:01:05,910 Let's begin with the mark-up. 22 00:01:05,910 --> 00:01:07,590 We will be starting off with index.html. 23 00:01:07,590 --> 00:01:10,950 You can see it's just a blank page so far. 24 00:01:10,950 --> 00:01:15,310 We will first add a div for our accordion wrapper. 25 00:01:15,310 --> 00:01:18,155 We will give it a class of tab-group. 26 00:01:18,155 --> 00:01:24,120 Inside our tab-group, we will create the first tab of the accordion. 27 00:01:24,120 --> 00:01:27,560 So we will write another div and give that a class of tab. 28 00:01:30,300 --> 00:01:33,990 Now, each tab will get one radio input and one label. 29 00:01:33,990 --> 00:01:38,030 The label will be both the label for our input, which will be hidden, and for 30 00:01:38,030 --> 00:01:39,980 the tab of the accordion. 31 00:01:39,980 --> 00:01:43,790 Let's create an input and give it an id of tab one. 32 00:01:46,930 --> 00:01:50,950 The type is radio and the name is tabs. 33 00:01:53,280 --> 00:01:55,570 This is part of the tabs radio group. 34 00:01:57,900 --> 00:01:59,910 After that we will write our label. 35 00:01:59,910 --> 00:02:03,627 We'll set the four attribute to tab one to tie it to the radio input and 36 00:02:03,627 --> 00:02:06,142 we will write our text which will be label one. 37 00:02:09,278 --> 00:02:12,130 Next we want to add the wrapper for our content. 38 00:02:12,130 --> 00:02:17,509 We will use a div and give it a class of tab-content. 39 00:02:22,083 --> 00:02:27,210 Inside can be any element that you want to display, text, images, you name it. 40 00:02:27,210 --> 00:02:28,530 We will just add some text. 41 00:02:28,530 --> 00:02:31,770 I'm going to pay some so we have something to see. 42 00:02:33,230 --> 00:02:34,020 And that's it. 43 00:02:34,020 --> 00:02:35,770 Our tabs have three main components. 44 00:02:35,770 --> 00:02:42,020 We have our input, our label, and our content container here. 45 00:02:42,020 --> 00:02:48,737 I'm going to copy our first tab and paste it a few more times [SOUND]. 46 00:02:48,737 --> 00:02:53,220 Then go ahead and change our id and four attributes on our inputs and labels. 47 00:02:53,220 --> 00:02:58,368 These all must be unique so we will do tab two, 48 00:02:58,368 --> 00:03:01,495 [SOUND] [SOUND] and label two. 49 00:03:01,495 --> 00:03:06,937 [SOUND] Then tab three, 50 00:03:06,937 --> 00:03:11,809 [SOUND] label three. 51 00:03:11,809 --> 00:03:13,140 And finally, tab four. 52 00:03:19,900 --> 00:03:21,710 So now we have four tabs in our accordion. 53 00:03:21,710 --> 00:03:25,400 We will save this, and that's it for the markup. 54 00:03:25,400 --> 00:03:29,090 If we needed to add another tab we would just add another one of these divs 55 00:03:29,090 --> 00:03:32,130 with a class of tab and its children. 56 00:03:32,130 --> 00:03:33,330 Pretty straight forward. 57 00:03:33,330 --> 00:03:36,750 If you look at this in your browser you will see it's not quite an accordion yet. 58 00:03:36,750 --> 00:03:40,150 We need to add our styles but you can see all our elements for each tab. 59 00:03:42,880 --> 00:03:46,025 So we have two style sheets linked in our head, 60 00:03:46,025 --> 00:03:49,420 style.css is just some boiler plate code for the demo, nothing too fancy. 61 00:03:50,490 --> 00:03:55,370 The other style sheet accordion.css is where we will be writing our styles. 62 00:03:55,370 --> 00:03:59,299 Opening it up, we will begin with our tab-group wrapper. 63 00:04:01,431 --> 00:04:04,310 We are going to center it so we will add margin zero auto. 64 00:04:07,480 --> 00:04:11,120 We will give it a width of 100% and a max width of 40ems. 65 00:04:15,920 --> 00:04:19,280 So, our accordion will be full screen on smaller devices, 66 00:04:19,280 --> 00:04:22,060 then center itself on the page when we get above 640 pixels. 67 00:04:23,730 --> 00:04:27,740 For our individual tabs, we want them to be one 100% of it's wrapper, and 68 00:04:27,740 --> 00:04:31,770 any positioning we do, we want it to be relative to the tabs themselves. 69 00:04:31,770 --> 00:04:35,030 So we will position it relative, and set the width to one hundred percent. 70 00:04:41,790 --> 00:04:46,278 Our radio inputs are going to be hidden, so we will position them absolutely. 71 00:04:46,278 --> 00:04:51,796 [SOUND] Then set them to the top left corner, 72 00:04:51,796 --> 00:04:59,779 and use zee index to push them way to the back and out of the way. 73 00:05:05,348 --> 00:05:08,261 We will be using an input label to toggle the radio button, so 74 00:05:08,261 --> 00:05:11,928 when we click on the label, it will reveal its adjacent accordion content. 75 00:05:16,728 --> 00:05:19,948 I will use the hex value to set the background to a nice teal color. 76 00:05:23,481 --> 00:05:27,160 We will set the color to white so it has a nice contrast with this darker background. 77 00:05:32,515 --> 00:05:36,013 We want the label to span the entire tab, so let's make it display block. 78 00:05:39,339 --> 00:05:42,030 Then set font weight to bold and line height to three. 79 00:05:46,750 --> 00:05:49,890 This line height will give us more of a clickable area. 80 00:05:49,890 --> 00:05:52,880 Next, we wanna add some padding, to get it off the left corner and 81 00:05:52,880 --> 00:05:55,610 give it a bottom margin, so we have a little space between tabs. 82 00:06:00,160 --> 00:06:03,664 And lastly, we are going to add a transition on our letter spacing Just so 83 00:06:03,664 --> 00:06:06,025 it draws the eye when we focus or hover the label. 84 00:06:13,493 --> 00:06:15,935 Now we will add our focus and hover styles. 85 00:06:24,297 --> 00:06:26,589 So when the input is focused or the label is hovered, 86 00:06:26,589 --> 00:06:29,364 we will lighten the background and change the letter spacing. 87 00:06:39,911 --> 00:06:41,852 Again, just to draw the eye to it. 88 00:06:41,852 --> 00:06:43,089 Next is our tab content. 89 00:06:47,005 --> 00:06:50,540 We will be hiding our content divs by setting a max height of zero and 90 00:06:50,540 --> 00:06:51,688 overflow of hidden. 91 00:06:55,421 --> 00:06:59,367 Then we will add a transition so when our tab is chosen,the content expands 92 00:06:59,367 --> 00:07:02,384 with a nice slide transition instead of a jerky opening. 93 00:07:02,384 --> 00:07:05,255 [SOUND]. 94 00:07:05,255 --> 00:07:11,058 [SOUND] Next, we will add some margin for our paragraph and our tab content div. 95 00:07:17,457 --> 00:07:20,690 Now all we have left is to write our styles that will open our tabs when 96 00:07:20,690 --> 00:07:22,990 our radio inputs are selected. 97 00:07:22,990 --> 00:07:25,850 For this we will be using the check pseudo class. 98 00:07:25,850 --> 00:07:31,410 So, for our selector, we are going to write tab Input checked. 99 00:07:32,920 --> 00:07:37,420 We will then use a general sibling combinator and then the tab content class. 100 00:07:42,060 --> 00:07:45,500 So we are targeting the class of tab content, 101 00:07:45,500 --> 00:07:49,060 which is next to an input that is checked inside the class of tab. 102 00:07:50,250 --> 00:07:57,960 And for this we are just going to increase the max height to 6.25em. 103 00:07:57,960 --> 00:08:01,220 Unfortunately we cannot transition a height from 0 to 100%. 104 00:08:01,220 --> 00:08:05,720 We are getting around that by transitioning the max height. 105 00:08:05,720 --> 00:08:09,432 So we set this value to the height of our largest accordion tab. 106 00:08:09,432 --> 00:08:12,750 That way we are only opening our tab as far as the content needs but 107 00:08:12,750 --> 00:08:15,330 still allowing for differences in height. 108 00:08:15,330 --> 00:08:16,500 That's it for our styles. 109 00:08:16,500 --> 00:08:19,130 We will save this and go back to our browser. 110 00:08:19,130 --> 00:08:21,580 Hit refresh, and there you go. 111 00:08:21,580 --> 00:08:23,031 We have a working content accordion. 112 00:08:28,494 --> 00:08:30,030 So, there you have it. 113 00:08:30,030 --> 00:08:34,810 With just a small amount of HTML and CSS, we have a fully functional accordion menu. 114 00:08:34,810 --> 00:08:37,310 The radio inputs are a great alternative to Java Script, 115 00:08:37,310 --> 00:08:40,980 because they bring in the tab and arrow key controls with them by default. 116 00:08:40,980 --> 00:08:43,480 There are a ton of things that we can do to improve on this design, and 117 00:08:43,480 --> 00:08:46,380 I would love to see what you guys can come up with. 118 00:08:46,380 --> 00:08:48,090 Well that's it for this workshop. 119 00:08:48,090 --> 00:08:49,880 I'm Dave Connor and I'll see you next time. 120 00:08:49,880 --> 00:08:50,450 Thanks for watching.