In this tutorial I’m going to show you how to create simple jquery tabs. Before, I showed how you can create Pure CSS Tabs, Pure CSS Accordion and also how to create Simple jQuery Accordion.
[tutorial_details]
To create our tabs, we’re going to use jQuery to add and remove css classes to hide and show the correct tab contents. But before we can work we jQuery, we need to create an HTML structure.
The HTML
<div class="container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">Tab One</li>
<li class="tab" data-tab="tab-2">Tab Two</li>
<li class="tab" data-tab="tab-3">Tab Three</li>
<li class="tab" data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
<h2>Tab One</h2>
<!-- Your content here -->
</div>
<div id="tab-2" class="tab-content">
<h2>Tab Two</h2>
<!-- Your content here -->
</div>
<div id="tab-3" class="tab-content">
<h2>Tab Three</h2>
<!-- Your content here -->
</div>
<div id="tab-4" class="tab-content">
<h2>Tab Four</h2>
<!-- Your content here -->
</div>
</div><!-- container -->The html above is pretty simple. We have a container div, an unordered list with 4 list items, these are the labels for the tabs, and then we have 4 divs for the content of each tab.
We use the data-tab attribute on our labels and tab-x ( x is a number ) id on our content divs to match the correct label with the correct content.
For example if we click the first label with data-tab = 1, the content div with the ID of tab-1 will be show.
Now that we have our html structure done, let’s add some styling to it.
The CSS
Our CSS is pretty basic. We give the tabs a basic style, and hide every content div that dose not have the current class added to it.
.container{
width: 700px;
margin: 0 auto;
}
.tabs{
margin: 0px;
padding: 0px;
list-style: none;
background:#2c3e50;
border-bottom: 5px #e67e22 solid;
}
.tabs li{
display: inline-block;
margin:0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size:1.2em;
line-height:2em;
color:#FFF;
}
.tabs li:hover {
background:#d35400;
}
.tabs li.current{
background: #e67e22;
color: #FFF;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
line-height:1.4;
}
.tab-content.current{
display: inherit;
}Note that by default tab-content is is hidden, by display:none. It have to have the class current on it to be displayed, which we will add with a few lines of jQuery soon.
The jQuery
First of, we need to include the jQuery library to our document and also create a new jquery file, called animate.js. This file will contain the jquery for our tabs.
Note that it is recommended for jQuery to be loaded at the bottom of the document for faster page load. Of course you can load it in the <head> section as well.
<script src="jquery.js" type="text/javascript"></script> <script src="animate.js" type="text/javascript"></script>
Now that we have the jQuery library and the animate.js included in our document, we can start to add some jquery into it.
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})code above will look for the data-tab‘s value of the clicked label, and add the current class to the content div that has the same ID number. For example, if you click the second tab label, it has data-tab value of 2, and our jQuery will add the current class to the content div that has the id of tab-2
Making it Resposnive
To make this responsive, there’s multiple ways you can go. For one, you could use the same method I used in the pure css responsive tabs tutorial, or you can display the tab labels under each other if the screen size is smaller then a certain width, using the code below.
@media only screen and ( max-width: 400px ) {
.tabs li {
display: block;
}
}After this, the tab labels will be align below each other if the screen’s width is less then 400px. You can of course change this to your liking.
If you have any question, suggestion and/or tips regarding how to create simple jquery tabs, feel free to leave a comment down below.