• Tweet

The tabbed content is a great way to to place a lot of content in a limited space on a page without losing usability. In this tutorial we will build a simple tabbed content and make it function using jQuery.

HTML Markup:

Let’s start with HTML markup. We need a container containing the tabs and the another containing the content. The tab container contains a ul list for the tabs, while the content container contains content classes for the content of each tab.

<div class="tabs">

	<ul class="tabs-nav">

		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2" >Tab 2</a></li>
		<li><a href="#tab3" >Tab 3</a></li>

	</ul>

	<div class="tabs-content">

		<div id="tab1" class="content">
			<!-- tab1 content -->
		</div>

		<div id="tab2" class="content">
			<!-- tab2 content -->
		</div>

		<div id="tab3" class="content">
			<!-- tab3 content -->
		</div>

	</div> <!-- /tabs-content -->

</div> <!-- /tabs -->

CSS:

Here is some basic CSS code for the tabs. I have used some CSS gradients for the tabs background.

.tabs {
	width:600px;
	margin:100px auto;
}

.tabs-nav{
	border-bottom: 1px solid #e8e8e8;
	overflow:auto;
	list-style:none;
	margin:0;
	padding:0;
	padding-left:10px;
 }

.tabs-nav li{
	background-image: -webkit-linear-gradient(top, #fff, #ebebee);
	background-image:    -moz-linear-gradient(top, #fff, #ebebee);
	background-image:     -ms-linear-gradient(top, #fff, #ebebee);
	background-image:      -o-linear-gradient(top, #fff, #ebebee);
  	background-image:         linear-gradient(top, #fff, #ebebee);

    float: left;
    font-size: 14px;
	font-weight:bold;
    margin-right: 6px;
	padding:6px 10px;
	border-radius:5px 5px 0 0;
	border:1px solid #d5d5de;
	border-bottom:none;
	cursor:pointer;
 }

.tabs-nav li:hover,
li.active{
	background-image: -webkit-linear-gradient(top, #ebebee, #fff);
	background-image:    -moz-linear-gradient(top, #ebebee, #fff);
	background-image:     -ms-linear-gradient(top, #ebebee, #fff);
	background-image:      -o-linear-gradient(top, #ebebee, #fff);
  	background-image:         linear-gradient(top, #ebebee, #fff);

	border:1px solid #ccc;
	border-bottom:none;
}

.content{
	padding:10px;
	border:1px solid #e8e8e8;
	border-bottom:3px solid #e8e8e8;
	border-top: none;
	border-radius:4px;
	background:#fcfcfc;
}

jQuery Code:

Let’s start with the jQuery code. First of all, we want to the css active class to the first tab so that it is active by default and its content is shown.

$('.tabs-nav li:first').addClass('active');

Also, by default, we want to hide all content classes and want to show only the content of the first tab only.

$('.content').hide();
$('.content:first').show();

So now the first tab is active and its content is visible, all other content divs are hidden. Now we need to add some code that we can show the content of each tab when it is clicked. We can write a small click function for the tabs:

$('.tabs-nav li').click(function(){

   .. code 

});

When any tab is clicked, we want to make it active, so we will remove the CSS class active from the previous active class and add to the clicked tab.

$('.tabs-nav li').click(function(){

	$('.tabs-nav li').removeClass('active');
	$(this).addClass('active');

});

Now we need to hide the content of the previous active tab and display the content of present active class. So, first we will hide all content again, like we did before and then find the href attribute of the clicked tab and then we can show its content.

This will find the href attribute of the clicked tab, for example #tab1, #tab2 or #tab3

var activeTab = $(this).find("a").attr("href");

Now we can show the content the div which has the attribute we found above:

$(activeTab).fadeIn(1000);

1000 indicates the fadeIn duration in milliseconds.
So, the click function will be:

$('.tabs-nav li').click(function(){

	$('.tabs-nav li').removeClass('active');
        $(this).addClass('active');
        $(".content").hide();
	var activeTab = $(this).find("a").attr("href");
	$(activeTab).fadeIn(1000);
	return false;

});

That’s all. Here is complete jQuery code with comments:

<script>
	$(document).ready(function() {

		//add active class to the first li
		$('.tabs-nav li:first').addClass('active');

		//hide all content classes.
		$('.content').hide();

		//show only first div content
		$('.content:first').show();

		//add the click function
		$('.tabs-nav li').click(function(){

				//remove active class from previous li
				$('.tabs-nav li').removeClass('active');

				//add active class to the active li.
				$(this).addClass('active');

				//hide all content classes
				$(".content").hide();

				//find the href attribute of the active tab
				var activeTab = $(this).find("a").attr("href");

				//fade in the content of active tab
				$(activeTab).fadeIn(1000);

			return false;

        });
	});
</script>