Tabbed content is a classic way of displaying different contents in a web page with a unique animation and style.

There are several ways to turn a native content into a tabbed content. Some developers choose to use jQuery plugins to make a simple tab which makes easier for developers to achieve such functionality and will save some time in development, but some plugins may contain some bad effect in performance and may cause conflict to some of your scripts.

Making a tabbed content is not hard, in fact we can make a simple tab in just a few minutes of coding.

Today, I will show you how to make a tabbed content using jQuery.

The HTML

The HTML code below is very straightforward. You will notice that we defined data-target attribute in our tab anchor link. This will be the target element of each tab. The value can be any CSS selector.

<div class="tab-wrap">
	<ul id="tabs">
		<li class="tab active"><a href="#" data-target=".tab-a">Sample Tab A</a></li>
		<li class="tab"><a href="#" data-target=".tab-b">Sample Tab B</a></li>
		<li class="tab"><a href="#" data-target=".tab-c">Sample Tab C</a></li>
		<li class="tab"><a href="#" data-target=".tab-d">Sample Tab D</a></li>
	</ul>
	<div class="tabs-content">
		<div class="tab-a tab-content">
			<!-- Tab content -->
		</div>
		<div class="tab-b tab-content">
			<!-- Tab content -->
		</div>
		<div class="tab-c tab-content">
			<!-- Tab content -->
		</div>
		<div class="tab-d tab-content">
			<!-- Tab content -->
		</div>
	</div>
</div>

The CSS

The CSS below will add a style into the tabs and tabbed content. You can modify the CSS to suite your website’s style and design.

.tab-wrap {
	max-width: 728px;
	margin: 0 auto;
}
#tabs {
	margin: 0;
	padding: 10px 10px 0;
	list-style: none;
	background: #d5d5d5;
	display: table;
	width: 100%;
}
#tabs > li {
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
	font-size: 17px;
}
#tabs > li a {
	display: block;
	padding: 10px 20px;
}
#tabs > li a:link,
#tabs > li a:hover,
#tabs > li a:focus,
#tabs > li a:active,
#tabs > li a:visited {
	text-decoration: none;
	outline: none;
	color: #333333;
}
#tabs > li.active {
	background: #ffffff;
}
#tabs > li a:active {
	text-decoration: none;
}

.tabs-content {
	background: #ffffff;
}
.tab-content {
	display: none;
	padding: 30px 20px 0;
}
.tab-content.active {
	display: block;
}

The jQuery

The script below is dependent with jQuery so we need to include jQuery library first into the page template.

<head>
	...
	<script src="jquery.js"></script>
</head>

Finally, paste the code below into your page template (inside the <script> tag or into your JavaScript template). I won’t innumerate everything. I added comments each line to explain the process. The script is very easy to understand.

jQuery(function($) {
	var tabs = $('#tabs');

	//lets get the active tab and show the content
	var activeContent = tabs.find('li.active a').data('target');
	$(activeContent).fadeIn('slow');

	//lets handle the tab click event
	tabs.find('li').on('click', function(e) {
		//get the clicked tab
		var tab = $(this);

		//get the target (data-target="")
		var dataTarget = tab.find('a').data('target');

		//since target is a string and not a valid selector
		//lets make it a selector
		var content = $(dataTarget);

		//lets get the parent element
		var tabsContent = content.parent();

		if(!tab.hasClass('active')) {
			//remove the active class in the tabs menu
			tabs.find('li').removeClass('active');

			//insert the active class to the clicked tab
			tab.addClass('active');

			//hide all the tab content
			tabsContent.find('.tab-content').hide(0);

			//show the target content
			content.fadeIn('slow');
		}
		e.preventDefault();
	});
});

That’s it. Our tabbed content is all set. Please see the demo using the demo link below to see the script in action.