* the left and right at 0 help the tabs to overlap each other */

* this makes the radio buttons disappear - we are only keeping track if they are checked or not */

* relative here contains the width of the content */ * allows for tabs to be next to each other */

To show which tab is active, set :checked ~ label to a different background color.

The “~ “ in between the elements in CSS tells us that we want the content class that occurs after a label element that occurs after a checked radio button. To do so, select the checked button and its content.

Setting the z-index of the selected tab will put that tab’s panel on top.

We also want to create a border and set a background color to a non-transparent color. In this case, set the left and right properties to 0. Using top, right, left and bottom, you can set the content where you want to inside the parent div. When the absolute position is set, the div can be set anywhere inside the relative parent.

Select the content div and then set the position to absolute.

Next, we need to tackle the actual content so that it only shows one tab at a time.

To actually select the button, we use.

So it looks more like a traditional tab, but to still keep the checked attribute of the button, we need to hide the circular portion of the radio button. If you check your work now, you will see that the labels have the circular radio buttons to the left of them.

Border-radius 10px, 10px, 0px, 0px – this will make the label look more like a traditional tab.

Padding: 5px, 10px – will add some space around the label text.

1px solid border in any color you wish.

tab container, we’ll set up the styling for the label: Next we have to figure out a way to show the checked block and hide the other blocks. Display: flex allows the tabs to lay next to each other in a row and the relative position basically acts as a boundary or fence that contains the content of the tab.Īt this point you will see what looks to be four blocks of text with a radio button and some content.

On the main container, we need to have the display property set to flex and have the position set to relative.

Set a wild card selector to a box-sizing: border-box.

Here is the minimum we need to do to get it to work: When it comes to writing the CSS, start on the biggest container and work your way to the smallest container. » MORE: A Brief Introduction to jQuery animate() Time to Start CSS: You can use whatever content you’d like, but it’s standard practice to use associated content on one tab. Inside the content class name will be our content. Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like! You can call it whatever you’d like in the class attribute, but I will call it class=”tabs”. Go ahead and set up your boilerplate HTML with a container inside the body that will serve as our main container for the project. Let’s take a look at the setup: Setup your HTML: We will talk about tabbed navigation more in-depth as we get into using JavaScript, jQuery and/or Bootstrap, but there is also an implementation we could use that just requires HTML and pure CSS. When you need to reach for a UI structure that organizes text or information into meaningful components and displays them on the screen without taking up too much space, tabbed navigation is a wise choice.

Access exclusive scholarships and prep coursesīy continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Career Karma matches you with top tech bootcamps.

Simple css tabs without javascript