Tabbing with CSS and HTML without using JS/Jquery

Using tabs in front end development is really a wonderful way to group several content into a very small space. Tabs are incredibly handy when you have to deal with lots of content that would simply fill up your entire page with too much information. There are many ways to create tabbing with jQuery. Here you will learn the best way to create tabbing with CSS3 and HTML without using any Jquery.

How will it look like?

Here is the image that shows the type of TAB we are going to create.

The HTML code

Below is the HTML structure to accomplish the tabbing.

[java]<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Services</label>
<div id="tab-content1" class="tab-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</li>

<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">About Us</label>
<div id="tab-content2" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>[/java]

CSS3 Code

Styling of TABs can be done using the HTML code below:

[java].tabs {
width: 653px;
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
box-sizing: border-box;
font-family:verdana;
}
.tabs li {
display: block;
float: left;
}

.tabs label {
background: #f89d3f;
border-radius: 2px 2px 0 0;
cursor: pointer;
display: block;
font-size: 18px;
font-weight: normal;
padding: 14px 21px;
position: relative;
text-transform: uppercase;
top: 4px;
transition: all 0.2s ease-in-out 0s;
box-sizing: border-box;
}
.tabs label:hover {
background: #ff880c;
}[/java]

Styling of TABs content

[java].tabs .tab-content{
background: #ff880c;
display: none;
font-size: 14px;
left: 0;
line-height: 25px;
overflow: hidden;
padding: 25px;
position: absolute;
top: 53px;
width:100%;
z-index: 2;
box-sizing: border-box;
}[/java]

The following code for hide and show tab content onclick of Tab1 and Tab2 labels

[java].tabs [id^="tab"]:checked + label {
background: #ff880c;
padding-top: 17px;
top: 0;
box-sizing: border-box;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}[/java]

In order to hide the radio button, use the code below:

[java].tabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}[/java]

Using Tabbing method in development can save you lots of efforts and time. Once you deploy this technique, it will make your project simple and attractive. Next time when you have to do tabbing prefer CSS and HTML.

Hope this helps! 🙂