CSS Tabs

A comprehensive guide to creating a fully functional tabbed structure with just HTML and CSS.

Tabs are one of the most frequently used HTML component, across a variety of web applications in infinite fashions.

What are HTML tabs?

HTML Tabs are most simplest system of focusing a content based on a specific title. We can simply swap the descriptive/explanatory content when we focus on a title. It can be made to slide or show/hide depending on our necessity.

To create a simple tabbed structure, we need to use a combination of HTML, CSS and Js. To see that example , please check the link here.

Here we are going to learn about creating a tab without using Js.

Tab with simple HTML and CSS

Radio buttons are awesome but used maily in forms. Lets make use of radio buttons to make tabs.

HTML

I created a simple HTML sructure with radio buttons and the contents inside the same parent container.

index.html

	<div class="simple-tab">
			<div>
				<input type="radio" id="tab1" name="tab" value="tab1" checked>
				<label for="tab1">Ipsos nosse</label>
        <input type="radio" id="tab2" name="tab" value="tab2">
				<label for="tab2">Illa videamus</label>
        <input type="radio" id="tab3" name="tab" value="tab3">
				<label for="tab3">Quis est tam</label>
        <span>
          <h4>Tab content 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Hic nihil fuit, quod quaereremus. Aliter enim nosmet ipsos 
            nosse non possumus. Duo Reges: constructio interrete. Sed haec 
            nihil sane ad rem; </p>
          </span>
				<span>
          <h4>Tab content 2</h4>
          <p>Nunc omni virtuti vitium contrario nomine opponitur. Sed ille, 
          ut dixi, vitiose. Quae cum essent dicta, discessimus. </p>
          <p>Illi enim inter se dissentiunt. Invidiosum nomen est, infame, 
          suspectum. Quae contraria sunt his, malane? Illa videamus, quae a 
          te de amicitia dicta sunt. Tubulo putas dicere? Pauca mutat vel plura 
          sane; </p>
        </span>
				<span>
          <h4>Tab content 3</h4>
          <p>Disserendi artem nullam habuit. Reguli reiciendam; Illi enim 
          inter se dissentiunt. Si quae forte-possumus. Quis est tam dissimile 
          homini. </p>
          <p>Sint modo partes vitae beatae. Sic consequentibus vestris 
          sublatis prima tolluntur. Aperiendum est igitur, quid sit voluptas; 
          Quid adiuvas? </p>
        </span>
			</div>
		</div>

Image: Visual of the above code

CSS

The CSS plays the main part here. We will make use of the ~ selector to reference items in relative to the checked radio buttons.

input[type="radio"]:nth-of-type(n):checked ~ .content:nth-of-type(n) {
 /* show or hide content */
}

So that once a radio button is checked, it will trigger the relative content. Below is the entire css that could create the tab functionality.

input[type="radio"]{
     display: none;
}
 input[type="radio"]+label{
     padding: 10px 20px;
     background:#465f80;
     transition:padding 0.3s ease-in;
     border-top:4px solid white;
     cursor: pointer;
}
 input[type="radio"]:checked+label{
     background:#1b2939;
     border:0;
     padding-top:14px;
}
 span{
     display: none;
     padding:10px;
     background:#1b2939;
}
 span p::first-letter{
     color: #b1c1ca;
     font-size: 23px;
     padding-right: 10px;
}
 input[type="radio"]:checked:nth-of-type(1) ~ span:nth-of-type(1){
     display: block;
}
 input[type="radio"]:checked:nth-of-type(2) ~ span:nth-of-type(2){
     display: block;
}
 input[type="radio"]:checked:nth-of-type(3) ~ span:nth-of-type(3){
     display: block;
}
 .simple-tab{
     color: #b1c1ca;
     display:grid;
     width:480px;
     grid-template-areas: auto auto auto;
     margin-top:50px;
}

This will give you the exact tab functionality.

Demo

or the demo can be found in the link below.

Demo .

Thank you reading it.