Creating interactive content can sometimes be tricky or involve scripting. Learn how to create tabbed panels without all the scripting. Having panels can add a lot of content in a single page, so, with a few sibling-based CSS selectors, you can create an interactive tabbed panel system with only CSS and HTML in no time.
- [Chris] Hi, this is Chris Converse and in this episode, we'll complete an interactive, tabbed panel interface, using only HTML and CSS, this will give us the ability to add more content to a web page, while allowing your users to decide what content they'd like to see, so if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in a text editor and so with the HTML file opened in a text editor and a web browser, if I scroll through the code in a text editor, all of the content is in a div with an id of panels, inside of the panels div are three radio buttons, these three radio buttons here in the browser are showing up right here, next we have a navigation element with three labels, those are those items right here and if I scroll down even further, we can see the three different panels and in the browser, if I scroll down, we can see the three panels here.
So what we're going to be doing is hiding the radio buttons and activating the navigation, so that if we click on one of the navigation elements, we will in turn change the state of the radio button and then show and hide the content of the panels and so now the first thing we need to do is hook the labels up to the radio buttons, so inside of the nav element, let's come in here to the first label for Bees, let's add a for attribute, set that equal to two quotes and then we'll put in the id of tab1, so now we're hooking up this label to this radio button, again, with the id of tab1, let's come in here and copy that attribute, let's add this to the second and third labels and for Wasps, we're going to set this to for tab2 id and for Ants, we're going to set this to tab3 id, so with that in place, save your HTML, go back to the browser and now if I click on Ants, that should activate the third radio button, then click on Wasps, then Bees.
So now we have these hooks working properly, let's go back to the exercise files, let's find style.css, let's open this in out text editor, let's scroll down, here you can see all of the rules I have in place to create this layout, let's scroll down to the bottom and let's come down here and find the rule, that targets the panels id with a greater than sign and then a div, after the padding property, let's come in here and hit a return and let's set a display type to none, save your CSS, go back to the browser, all of the panel content is now hidden, so now back in the CSS, let's come in here and hide the radio buttons, so pound sign, type panels space input, beginning and end bracket, split this open, let's set display for these to none as well, save your CSS, back in the browser, we no longer see the radio buttons either.
Now let's come down here and add some CSS rules, that will change the color of the tabs, if the corresponding radio button is checked, so do that by typing a pound sign, then panels, then a space, then a greater than sign, then input, then a set of square brackets, inside of the square brackets, we're going to type id equals two double quotes, then tab1, then outside of the square brackets, we're going to use a pseudo-class to check its checked state, so a colon, then the word checked, then a space, then a tilde and then nav space label, another set of square brackets, for equals two quotes, then tab1, so what this tilde is actually doing is it is the non-adjacent sibling selector, so what this does is it looks for the nav with a label and a for attribute with the tab1, if it immediately follows an element in the HTML of an input device with an id of tab1 in its checked state, so with those in place, let's add a comma, let's come in here and select this entire line, except for the comma, let's hit a return, let's paste this again, let's change tab1 to tab2 in both the id and the for, comma, let's paste this again, change the ones to threes, then on the next line, we'll add in our curly brackets, so this rule is actually targeting all three of these elements and so the property we're going to set is going to be the background-color, we're going to set this to a hexadecimal value, so pound sign, ef for red, 9d for green and 26 for blue, down the next line, let's add the color of the type to white, so color colon space, a pound sign and three fs, with those in place, we can hit save, we go back to the browser, since the middle radio button is in a checked state in the HTML, we can see the Wasps label here showing up in a checked state, then if I click Bees and Ants and then back to Wasps, you'll see that all of the selcted states change, based on the radio buttons.
So now back to the CSS, the last thing we need to do is turn on the content, that corresponds to the checked radio button as well, so let's add another rule, let's target the panels id, then a space, greater than, let's type an input, square brackets again, id equals two double quotes, tab1, then add the checked pseudo-class, then a space, then a tilde, then type in div, another set of square brackets, we're going to look for an attribute with an id equaling two double quotes, panel1 and we'll come in here and copy that entire line, add a comma, then paste this on the next line, let's come in here and change the ones to twos, so tab2 and panel2, end of the line, add a comma, paste this one more time, change the ones to threes, then let's add in our brackets and then inside of the brackets, let's set a display type of block, with that in place, save your CSS, go back to the browser, again, since the second radio button for Wasps is in a checked state in the HTML, that will then set the label to show in its selected state and we can now see the content for panel2, if I click on Ants, we're seeing panel3 and if I click on Bees, we're seeing panel1.
So with a few sibling-based CSS selectors, we've created an interactive, tabbed panel system, using only HTML and CSS and so with that, I'll conclude this episode and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.