jQuery Tutorial: Guide to build custom and simple Tab view

Build custom and simple Tab View
Hello Friends! How are you all? I hope you are good!. Today I gonna discuss how to build custom and simple tab view. Tab view is one of the most common view to group and segregate the related and non related information respectively. The places where you see this UI control commonly are browsers and Code Editors (IDEs). So as we all got its usability; lets build our custom one for our website.

I have grouped the guide in several steps:

First we will have a set of html elements that will become the backbone to our tab view.

<div class="tab-container">
		<li data-href="#html" class="active">HTML</li>
		<li data-href="#css">CSS</li>
		<li data-href="#javascript">Javascript</li>
		<li data-href="#jquery">jQuery</li>
		<div class="tab-data active" id="html">
			<p>Some content....</p>
		<div class="tab-data" id="css">
			<p>Some content....</p>
		<div class="tab-data" id="javascript">
			<p>Some content....</p>
		<div class="tab-data" id="jquery">
			<p>Some content....</p>

Here is the CSS we gonna use for styling of above code.

	border-bottom: 1px solid #aaa;
.tab-container ul{
	list-style: none;
	border-bottom: 1px solid #aaa;
.tab-container ul li{
	display: inline-block;
	text-align: center;
	padding: 6px 8px;
	cursor: pointer;
	border:1px solid #aaa;
	border-radius: 2px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom: 0px solid transparent;
	background-color: #eee;
.tab-container ul li.active{
	top: 1px;
	position: relative;
	color: #999;
	z-index: 2;
	background-color: #fff;

	display: none;
	display: block;

Now we will work on JavaScript code that will make the above pieces behave like a Tab View.

<script type="text/javascript">
$(document).ready(function(event) {
	$('.tab-container li').on('click', function(event){
		$parent = $(this).parent().parent();

The above code works fine if the CSS only is changed. If the element structure needs to be changed; some parallel changes has to be made in the JavaScript.

This is the simplest code to make the Tab view.

Moreover; the container can be made to look more beautiful. To make this tab view of fixed height; i.e. the content area will of fixed height following CSS can be added to the above code.

	height: 450px; /****Change the height value here****/
	overflow-y: auto;

If you made something innovative and creative using the above code; share your experiences with us through comments.

And stay tuned for more creative tutorials on web design and development by subscribing to us.

Demo  Download

You've successfully subscribed to Time to Hack!