Create a Neat Content Box with Tabs using CSS & jQuery

In this tutorial, you will learn how to create a tabbed content box using CSS and jQuery. You can also download the source code at the end of the tutorial.

Call of Duty
Mortal Combat
Halo
Portal

Call of Duty: Black Ops bears the series' standard superbly, delivering an engrossing campaign and exciting competitive multiplayer.

Mortal Kombat returns after a lengthy hiatus and puts players back into the Tournament for 2D fighting with gruesome combat and fatalities.

Halo: Reach is the culmination of the superlative combat, sensational multiplayer, and seamless online integration that are the hallmarks of this superb series.

Portal 2 is an action shooter game from Valve Software that draws from the original formula of innovative gameplay, story, and music, which earned the original Portal more than 70 industry accolades.

Browser Support	»
Language	»	CSS2, HTML4 & jQuery
Difficulty	»	Beginner
Estimated Completion Time	»	15 minutes

Steps to Create the Tabs Effect

→ Download and include jQuery.
→ Make the Tabs using <li> tags.
→ Make the Tab Content Box using <div> tags.
→ Use Stylesheet code to style the Tab Menu and the Tab Content Box.
→ Use jQuery Code for Tabs Effect.

→ Download & Include jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight "write less, do more" JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.

We will have to include jQuery inside the <head> tags.
Here's the code:

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to "http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js";

<head>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
 
</head>

→ Create the Menu Tabs

We will use the <ul> tag for creating the Menu Tab, and <li> tags for creating the Menu Tab Labels.

Use class="tabs" for this <ul> tag.

Now give each <li> element a rel attribute. This rel stands for Relationship.

We will relate this Menu Tab Item to its Tab Content later using this rel attributes value using jQuery.

Here's the Html code

Here each <li> item have different rel value. We will use these rel attributes values to relate them to their contents.

Here the first <li> item has a class="active", to make it the default active tab when someone opens the webpage.


   <ul class="tabs"> 
        <li class="active" rel="tab1"> Call of Duty</li>
        <li rel="tab2"> Mortal Combat</li>
        <li rel="tab3"> Halo</li>
        <li rel="tab4"> Portal</li>
    </ul>

→ Create the Tabs Contents Div

Now we will create a <div> element with class="tab_container".
This <div class="tab_container"> will contain all the contents related to the Menu Tab in seperate <div> .

Each of these div's will have an attribute id value equal to the rel value of the Menu Tab Item to which it is related.

Here's the Html code

Each of these div's will also have an attribute class="tab_content".


<div class="tab_container"> 

     <div id="tab1" class="tab_content"> 
 
         <p><img src="images/cod.jpg"> <br />
         <strong>
         Call of Duty: Black Ops bears the series' standard superbly,
         delivering an engrossing campaign and exciting competitive multiplayer.
         </strong>
         </p>

     </div><!-- #tab1 -->
     <div id="tab2" class="tab_content"> 

       <p><img src="images/mortal combat.jpg"> <br />
      	<strong>
      	Mortal Kombat returns after a lengthy hiatus and puts players
      	back into the Tournament for 2D fighting with gruesome combat.
      	</strong>
       </p>

     </div><!-- #tab2 -->
     <div id="tab3" class="tab_content"> 

       <p><img src="images/halo.jpg"> <br />
      	<strong>
      	Halo: Reach is the culmination of the superlative combat, sensational
      	multiplayer, and seamless online integration that are the hallmarks
      	of this superb series.
      	</strong>
       </p>

     </div><!-- #tab3 -->
     <div id="tab4" class="tab_content"> 

       <p><img src="images/portal.jpg"> <br />
      	<strong>
      	Portal 2 is an action shooter game from Valve Software that draws 
      	from the original formula of innovative gameplay, story, and music,
      	which earned the original Portal more than 70 industry accolades.
      	</strong>
       </p>

     </div><!-- #tab4 --> 
     
 </div> <!-- .tab_container -->

→ Styling the Tab Menu and Tab Content Box

The following effects are applied on the Tabs using the Stylesheet code.

The Active Tab menu will have a white(#FFFFFF) background color and the Inactive Tabs will have a grey(#EEEEEE) background color.
The <li> item will be highlighted when a mouse is hovered on it.
Only the Active Tab Content will be shown to the user and the remaining Tab Content will remain hidden using the display:none; property applied on the class="tab_content".

Here's the Stylesheet code

 <style type="text/css">

	ul.tabs {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px;
		border-bottom: 1px solid #999999;
		border-left: 1px solid #999999;
		width: 100%;
	}
	ul.tabs li {
		float: left;
		margin: 0;
		cursor: pointer;
		padding: 0px 21px ;
		height: 31px;
		line-height: 31px;
		border: 1px solid #999999;
		border-left: none;
		font-weight: bold;
		background: #EEEEEE;
		overflow: hidden;
		position: relative;
	}
	ul.tabs li:hover {
		background: #CCCCCC;
	}	
	ul.tabs li.active{
		background: #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}
	.tab_container {
		border: 1px solid #999999;
		border-top: none;
		clear: both;
		float: left; 
		width: 100%;
		background: #FFFFFF;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
		display: none;
	}
 
</style>

→ jQuery for the Tabs Effect

The jQuery code will detect clicks on the <li> Menu Tab element and take the value of it's rel attribute and display the <div> whose id value matches the rel value of the Menu Tab Item.

Here's the Html code

<script type="text/javascript">

$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
});

</script>

The Explanation

Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

[For div with class="tab_content"]
Line 5 › $(".tab_content").hide();
→ This will hide all the <div> elements with class="tab_content".

Line 6 › $(".tab_content:first").show();
→ To make the First <div class="tab_content"> active Tab Content, by default.

[For displaying the Active Tab Content]
Line 8 › $("ul.tabs li").click(function() {
→ To detect clicks on the <li> items.

Line 9 › $("ul.tabs li").removeClass("active");
→ To remove the class="active" from the previous Active Menu Tab.

Line 10 › $(this).addClass("active");
→ To apply the class="active" to the current clicked <li> Menu Tab Item.

Line 11 › $(".tab_content").hide();
→ To hide all the <div> with class="tab_content".

Line 12 › var activeTab = $(this).attr("rel");
→ To assign the value of the rel attribute from the current clicked <li> Menu Tab Item to the activeTab variable.

Line 13 › $("#"+activeTab).fadeIn();
→ This will add a Fade In Effect to the <div> whose id value matches the rel value of the current Active <li> Menu Tab Item.

Click here to Download the Demo

This resource is part of the Entheos Free Resources section. These resources & tutorials cover Corel Draw Tutorials, CSS Tutorials, Flash Tutorials, Fireworks Tutorials and Effects, Dreamweaver Tutorials, Design Ideas & Inspiration, Photoshop Effects & Web Design Tutorials.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.