Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:5Length:50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 The Basics of Creating Tabs

Welcome to the first lesson of this course. Let’s begin by going over the basics of creating tabs. We’ll be talking about markup, styling, and functionality. Here we go!

Related Links

2.1 The Basics of Creating Tabs

Welcome to the first lesson of the course, where we'll start by going over the very basics of creating tabs. Here's the breakdown of what you will learn, we'll begin by writing the markup for a tab control. Then, we'll write the CSS to give it some basic styling. And finally, we'll write some JavaScript code that will make the tabs functional. Let's go. I'll be using Codepen for this demo. And for the markup, we're gonna keep things very simple. We'll start with a div class tabs. This is more of a container, so we can position our controls in the page. And then, each tab control has two sections. Basically, we have the tab links that allow us to switch between each piece of content. And we have the tab panels that contain the actual content. So for the links, what we're gonna be using. We'll give it an ID of tab links, oops. And then, inside, we're gonna create five list items, each one with an anchor tag. And the href will be tab dash number. So we have tab one, tab two, tab three, tab four, and actually, we're gonna use a hash sign here. So for the content, we're gonna go adding some dummy text here. And on the first link, we're gonna add class of active. You'll see why in just a little bit. So these are the tab links. Now, for the tab content, there are lots of ways we can do this, but let's keep things simple. Let's create a section with an ID of tab-1, and on this first one, we'll also add a class of active. And inside, we're gonna put our tab content. Then, we'll repeat the step for the other tabs. So this is tab two, and inside, we're gonna put the content, and we'll do the same for the other three tabs. And that's pretty much all we need for the mark up. We have our parent tabs container. We have a UL, an unordered list for the tab links. And then, a section for each tab content. Now, let's move on to styling. For this, I am using SaaS to speed things up. I created some variables where I stored, basically, a bunch of colors. And I set a flux container on the body and justified the content, basically, aligned the content in the middle, and added a little bit of padding. So let's start our styling with the actual tabs, and we'll go like this. Let's set a max width of about 60 rams, and then, we'll target the direct descendant, you will. So we'll target our tablets. And here's what we'll do, we'll remove the list style, and we'll remove the padding. And then, we'll target each individual list item, and we'll simply set a display. So inline block, because we want to align these horizontally like this. Next, let's target the anchor tags, and we'll do this. This plugin block, so we can add some proper margin and padding. We'll remove the text decoration, so that underline. Text decoration, none. Let's set a background. We'll set it to link BG. Let's do a little bit of padding, 1 ram, 1.5 ram on the sides, like that. Let's set a color to link color, which is white, basically. And then, for the Active tab, here's what we'll do. Active, will set a background to white, and we'll set the color to text color. Okay, perfect. Now, let's add a hover state. So we'll say hover, color white, all right? So now, when we hover on each one of these, we'll get a different color. Let's actually exclude the active state here, so we'll say not, active. So we don't get the hover styling on the active item. And finally, let's add a load transition here. All properties, just to keep things simple, 0.2 seconds, ease in and out. Looking good so far. Next stop, let's turn our attention to these sections. So inside tabs, we're gonna target this section, we're gonna set our background color to white, just like that. Let's add a little bit of having, let's say, 1.5 rams and 2.5 rams on this side, and let's set a display none. So that will effectively hide all of these, and then, the sections that have the cross of active will get a display block. Great, now, the last thing we gotta do, is go to this list here. And we're gonna set margin top and bottom to zero. And let's do one ram on the sides. That will effectively create a one ram gap here on the left, and also, on the right. So now, our tab link, the active one, is connected to our tab panel. So that's the basic styling that you can do to tabs. Of course, you can apply any styling you want. I kept things very simple here, so you can see the basics. Now, currently, clicking on these links doesn't do anything. So we need to write a little bit of JavaScript that will is essentially listen for mouse clicks on these links, and then, switch to the appropriate tab panel. So let's go ahead and do that right now. Now, for this, there are two ways you can do it. You can use vanilla JavaScript, which is your bog-standard JavaScript code, or you can use jQuery. I'm gonna show you both ways, so you can decide which one is best for you. So we'll start with vanilla. First, we're going to reference the tab links. So for that, we'll create a constant, called Tablinks, and we'll say document, query selector all, and we'll say Tablinks, list item A. This essentially creates a list of items that match this selector, and put it in the tab links constant. Next, we're gonna watch for link clicks. So we'll say tab links for each function, we'll pass in a link there. We'll link value, and we'll say link ad event listener, and we're listening for clicks, and we're gonna call in a function called onTabLinkClick, and we're also gonna pass in the value of false. Now, what happens here? We'll go through each of the tab links that we referenced previously, and we're adding an event listener for each one. So basically, on click, we're gonna execute that function. Now, let's go ahead and write that function on tab link click. We're gonna pass in the event parameter. So here, the first thing we'll do, is we're gonna get the active link, and remove the active class. So we'll say document.querySelector, and we'll say tab links able to class of active, then, we'll target the classList, and we'll say remove active. Okay, so now, clicking on either one of these tabs, will remove the active class from the active link. Now, let's also remove the active class from the target section. So the tab panel that is currently active, to do that, we'll do another query selector. It's actually, oops, it's actually duplicate this. So document query selector, this is a bit simpler. We'll just do a section with a class of active, same thing classList remove active, so far, so good. Next, we'll add the active class to the current link and the corresponding section, or the corresponding panel. So we'll say event.target.classList.add active. Okay, so what happens here, is that when we call this function on the link that was clicked, we're passing in this event. An event target refers to the link that was clicked. So all you gotta do is add a class to that element. Next, let's find the panel that corresponds to the link that was clicked. So for that, here's how we do it. We go document, get element by ID. And the ID, we'll get from here from the href of the link, that was clicked, right? So we'll say events.target.href.split. And I'll explain what this does in just a little bit, just bear with me here. ClassList and, All right. So let's see if this works, and it does. Let me explain what happened here. Because this is probably a little bit more confusing. Okay, events.target.href, and let me actually open up the console here, and I'm gonna do a console log for events.target.href, okay. So when I click this, you can see the hrefs, Of the links that we click. And we're only interested in this part right here. Tab 2, Tab 3, Tab 4, and Tab 5, and so on. Now, split is a method, that's gonna split a string in multiple strings. And we pass in the hash sign, because this is the point where we want this plate to begin. So in this case, tab five for example, is split in two, hash sign and tab five. So if I were to set split hash sign, It creates an array of two strings. We have this one, and we have the text that's after the hash sign, So tab-2. So to access that tab-2, we just say [1]. Meaning, I just want the second string. Okay, so then, we take this string that we got, for example, tab five, and we pass it in here, document.getElementById, in this example, it would be tab five. So I target that element, and I add the class of active. That's all there is to it. And now, with this, we have functioning tabs. Clicking each tab will trigger this function, that will do the following. It will remove the active class from the currently active tab link and tap handle, and it will then add the active class to the link that I clicked, and to the corresponding panel. It's very, very simple. Now, to do this with jQuery, it's actually even simpler. We'll start by referencing the tab links. So constant, tab links is gonna be equal to tab links list item A. So we're doing this instead of this whole query selector all. Next, let's handle the link clicks. So we'll say tab links. Click function, will pass in an event there, will do a variable here called this, which references jQuery this, this is for performance reasons. Let's prevent the default click behavior. We'll say event, prevent default, and then, we'll remove the active class from the active link in the section. To do that, we'll search for tab links A with a class of active. And also, section with a class of active. And we'll just say remove class, active. And finally, we'll add the active class to the current link and corresponding section. So we'll say this, add class, active. And also, this.attr, href, and class active. Now, to see if this works, let's actually comment this bit. So the link clicks will actually be listened by our jQuery function here. Okay, so let's see we have a little problem here. It doesn't work, because we actually did not include jQuery here, all right. There you go. And that's the jQuery version. So a quick recap of what we did here on the jQuery function. We first got the tab links, can put those in constant call tab links. And then, for each link, on click, or do the following. We get a reference to this, where the link that was clicked in the variable, dollar sign this. This is for performance reasons. We don't reference this, but multiple times, we just reference it once. And then, we use this variable instead, we prevent the default behavior of the links. And then, we remove the active class from the active link and corresponding panel. With this bit, and then, we add the active class to the link that we just clicked, and to the corresponding section, that's all there is to it. Now, the jQuery version. I think it's a little bit simpler to understand, it has a simpler, or a syntax, then, the vanilla JavaScript. But you can use either of one, if you're doing this like in a word press, installation, which already has jQuery by default, then, go ahead and use this version. If you don't wanna load an additional library, then, the vanilla jazz version will do just fine. All right, we now have functional tabs. The problem with this, is that they don't work very well on mobile devices, were screens. We'll fix that in the next lesson by using two different methods. See you there.

Back to the top