Create Simple jQuery + CSS Tab

Displaying large, lengthy contents on a page is a bad thing. Normally user ignores the page where they see a lot of texts & texts & texts. Here "Tabs" comes to act. Tabs are very useful to display large, lengthy contents on  a page.

Let's have a short trick on how to create jQuery tabs, it's too easy to create. We will create tabs using a little bit css & jQuery.

Let's build html first.

Create a div to wrap all contents for tabs.

<div id="tabContaier">
<ul>
	<li><a href="#tab1">Div One</a></li>
	<li><a href="#tab2">Div Two</a></li>
	<li><a href="#tab3">Div Three</a></li>
</ul>
</div>

Now insert the contents

Insert these html inside the tabDetails div

<div id="tab1">
      <h1>Div One</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>
<div id="tab2">
      <h1>Div Two</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>
<div id="tab3">
      <h1>Div Three</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>

Above, ul li has hyperlinks with #tab1, #tab2 and #tab3. These will be used to determine which tab content to show. In tabDetails divs I have used those hyperlinks as id. Make sure that you put the related id as its button hyperlink has.

Now lets maintain look and feel

Write some css for tab buttons.

#tabContaier ul{
overflow:hidden; /*Clearing float. */
border-right:1px solid #fff;
height:35px;
position:absolute; /*Takings tabs to higher layer */
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabContaier li a{
background:#ddd;
border:1px solid #fcfcfc;
border-right:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 30px;
text-decoration:none;
text-transform:uppercase;
}
#tabContaier li a:hover{
background:#eee;
}
#tabContaier li a.active{
background:#fbfbfb;
border:1px solid #fff;
border-right:0;
color:#333;
}

Now write css for tab details and tab content holders.

.tabDetails{
      background:#fbfbfb;
      border:1px solid #fff;
      margin:34px 0 0; /*1px less then actual tab height to fix the border gap between active tab & tab detail section. */
}
 .tabContents{
      padding:20px
 }
 .tabContents h1{
      font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
      padding:0 0 10px;
 }
 .tabContents p{
 padding:0 0 10px;
 }

It's all set. We have a beautiful interface for the tab. Now it's time to make it work.

Create jQuery that makes the tab work

First of all hide all tab content divs, for this write a line:

$(".tabContents").hide();

Now set the first div to show by default, to do this place the code below:

$(".tabContents:first").show();
 //here :first selector filters the first div, see above we have set the first link also in active state.

Ok we have done it. Now let's fire the click event & switch the content divs. to do this look at the script below:

 $("#tabContaier ul li a").click(function(){
      var activeTab = $(this).attr("href"); //save the clicked links target
      $("#tabContaier ul li a").removeClass("active"); // remove pre-highlighted tabs
      $(this).addClass("active"); //set this link to highlight
      $(".tabContents").hide(); // again hide pre-showing div
      $(activeTab).fadeIn(); //match the target div & show it
 });

That much! Now we have created a working tab using jQuery & CSS.

Demo:
Download