How to Create Super Easy jQuery Tabbed Containers

In this tutorial I’m going to show you how to create tabbed containers using jQuery. Tabbed containers is an excellent way of presenting your content. Data is organized where only the current tab’s section is shown. Once the user clicks on the other tabs, its associated content gracefully appears.

Please note that you will need to know some HTML / CSS and a little Javascript scripting to follow. Ready to get started? Let’s begin:

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#tabs {
	border:1px solid #ccc; 
	height:28px; 
	background:#eff5f9; 
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}
#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right:5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
	font-weight:bold; 
	color:#000000; 
	padding:7px 14px 6px 12px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

1
2
3
4
5
6
7

.container{ 
	clear:both; 	 	 
	padding:10px 0px; 
	width:664px; 
	background-color:#fff; 
	text-align:left; 	 
}

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

1
2
3
4
5
6

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {	
    //our script goes here...
});
</script>

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

1
2

$('#tabs li a:not(:first)').addClass('inactive');
$('.container:not(:first)').hide();

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

1
2
3
4
5
6
7
8

$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');		
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1″. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.

Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

1
2
3
4
5
6

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');		 
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');	
}

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

You should also check out these posts:

• Create Rotating (Full Paged) Background Images with CSS and jQuery
• Create an Email Opt in Box for your Downloads – Part 1