Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:5Length:50 minutes
Ui design practical guide to tabs 400x277
  • Overview
  • Transcript

2.3 Creating CSS-Only Tabs

The tabs we’ve created so far use JavaScript, and that’s totally fine, but sometimes you might want to use a CSS-only solution. That’s what we’ll do in this lesson.

Related Links

2.3 Creating CSS-Only Tabs

Welcome to lesson number three, the tabs we created so far use JavaScript and that's totally fine. However, there are times when you might wanna consider using a CSS only solutions, and that's exactly what we're gonna do in this lesson. We'll use a slightly different markup and CSS to create functional tabs without a single line of JavaScript. And we'll also make these responsive. Let's go, we're back here in CodePen, where I'm gonna edit the code that we used previously. So first things first, let's get rid of all the JavaScript, okay? And as you can see, right now our tabs are not functional. Now we have to make some changes to the actual markup. And the way this is gonna work, is actually quite simple. We're gonna use an input type radio, so a radio button, and the label as the tab link. And when we check one of these radios, we're also going to set display none or display block to the corresponding tab panel. So, we'll get rid of this ul and then before each section, we'll say input, type radio, will you give it an ID tab1 and we'll give it a name, tabs. And also, because this is the first one, I'm gonna add the attribute of checked. Then we're gonna add a label for tab1 and with the same text that we used previously, and then we have a section. In here, this is the beautiful part of this approach, we don't actually need any ID or any class to the section. So now I'm gonna go ahead and repeat the same process for all of the other sections. Okay, so now our markup looks like this, we have input and a label and then section. Now what's important here is that you have the same name for all of the radio inputs. Because if you use different names, you'll be able to select more than one radio. Okay, let's move on to styling. For this, it's actually going to be a bit easier if we just delete the majority of this code. Let's go ahead and do that. I'm just gonna keep a reference to the tabs. Let's say we'll select max width 100% on the mobile. And when the screens are a minimum of 700 pixel in width, we'll set a max width of 60. We'll do a display of flex and then let's target the inputs type radio, and we'll simply hide them. And then, Let's target the actual labels. We'll basically use the styles that we had before on the links. So we have a display block Setting a background padding color and small transition. And also let's set a cursor to pointer. Let's add the hover state, and then let's target the section. Here, we'll do the same styling as before, background white, add padding, and also display to none to hide them. Okay, now to show the correct panel on the active or checked radio here's what we do. We go to the input type radio, and we do this, checked plus label and we set background white and we set color to text color. Okay, So now we're getting the correct styling on the active class. Now let's also display the correct section. That's also very simple, we do checked plus label plus section. And we say display block, and it works beautifully. So why is this working? Well, let's take a look at the HTML. The structure is very simple, we have input label and section. And they're all children of tabs. So label is a sibling of the input, and section is a sibling of label and input. So when we say, get the label that is immediately after a checked radio, we set the background and then the color to that element. And here, we're basically saying, get the section that's after the label, that's after the checked radio. And we choose to display that, very, very simple. Now, in terms of layout, this is not looking right because we set our display to flex on the tabs. The input, the label, and the section are all flex children, or flex items. So they're displayed one after the other. To fix that, we'll set flex-wrap to wrap. And that will basically allow us to wrap all of the elements. Now to position these panels to the bottom of the links, we do this, section, we go all the way down here and we say order and we give it a high number like 100. And because we're working with flex-box we can use the order properly to set the order of specific elements. So now we make sure the sections are always very high up there in order and are displayed below. My other elements, which in our case are the inputs and the labels. Now what about on smaller screens. Well, when we get to smaller screens, this also works because it's using the exact same markup and the exact same styling. I think we'll adjust our break point here. This is I don't know, maybe let's put 1100, right? So we'll make that change at 1100 pixels and also let's make this label in bold. So let's see checked label. We're actually gonna copy this media query from here and we'll change this to maximum width. So it's only displayed on the small screens. Great and there you've it. A CSS only approach to creating responsive tabs. And as you can see the tab to accordion behavior occurs naturally here. And because we are using the exact same structure, switching to a tab on mobile will keep the same tab switched on desktop, which is fantastic. And we did all of this without writing a single line of JavaScript. Now, when should you use CSS only tabs? When should you use JavaScript tabs? Well, if for example, you're integrating tabs with a multi-page form, then you would need to add JavaScript, because you need to listen for those submit events from the form to switch tabs. Or maybe you want to add some JavaScript animations instead of CSS animations. Even though it's not recommended, you can still do that and in that case you would use JavaScript tabs. But, in the rest of the time, I strongly recommend you use the CSS only approach, because it's gonna work in old browsers, even if JavaScript is disabled for some reason and it adds this responsiveness with tabs to accordion behavior naturally. Without having to do any kind of JavaScript wizardry to clone elements or to dynamically create other elements in the page. All right, now that we know how to create horizontal tabs, let's talk about another type. So in the next lesson, you'll learn how to create vertical tabs, and also when and where you should use them, see you there.

Back to the top