Introduction

This article will show you how to create a small tabbed information box using jQuery and CSS step by step. Many web sites use tab-based content as a way to save space in a web page. Tabbed content is a great way to handle the space issue and has been widely used in web sites.

Step 1: First we have to create a Web Application.

Step 2: Secondly you have to add a new page to the web site.

Step 3: In this step add the Style.css file to your Styles folder.


img1.jpg

Step 4: In this step we write the script reference to the aspx page; let us see from where you have to write the script code:

img2.jpg

Right-click on Selected file -> copy and paste it inside <Head> section of your page; see step 5.

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 6: In this step we have to write the jQuery code which is given below.


<script type="text/javascript">

$(document).ready(function () {
$("a.tab").click(function () {
$(".active").removeClass("active");

$(this).addClass("active");

$(".content").slideUp();

var content_show = $(this).attr("title");

$("#" + content_show).slideDown();
});
});
</script>

Step 7: In this step you will see the body code of the Default2.aspx page which is given below.

Code

<body >

<div id="tabbed_box_1" class="tabbed_box">

<h4>C-Sharpcorner.com <small>Select a Tab</small></h4>

<div class="tabbed_area">
 <ul class="tabs">

<li><a href="#" title="content_1" class="tab active">Resources</a></li>

<li><a href="#" title="content_2" class="tab">Teachnology</a></li>

<li><a href="#" title="content_3" class="tab">Authors</a></li>

</ul>
 <div id="content_1" class="content">

<ul>

<li><a href="">Home</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="">jobs</a></li>

</ul>

</div>

<div id="content_2" class="content">
 <ul>

<li><a href="">.NET 4.0<small>105 Posts</small></a></li>

<li><a href="">ADO.NET & Database <small>500 Posts</small></a></li>

<li><a href=""> ASP, JavaScript, CSS <small>22 Posts</small></a></li>

<li><a href="">ASP.NET MVC & JQuery <small>150 Posts</small></a></li>

<li><a href="">JQuery <small>3 Posts</small> 150 osts</a></li>

<li><a href="">Silverlight <small>700 Posts</small></a></li>

</ul>
 </div>
 <div id="content_3" class="content">

<ul>

<li><a href="">Mahesh Chand <small>1145 Posts</small></a></li>

<li><a href="">Dhananjay Kumar <small>445 Posts</small></a></li>

<li><a href="">Arun Choudhary<small>50 Posts</small></a></li>

<li><a href="">Amit Maheshwari <small>90 Posts</small></a></li>

<li><a href="">Deepak Dwij<small>60 Posts</small></a></li>

<li><a href="">Akshay Teotia <small>110 Posts</small></a></li>
 </ul>
 </div>
 </div>
</div>

</body>


Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>A small tabbed information box using jQuery and CSS</title>
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Styles/Style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
 $(document).ready(function () {
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();

var content_show = $(this).attr("title");

$("#" + content_show).slideDown();
});
});
</script>

</head>

<body >

<div id="tabbed_box_1" class="tabbed_box">

<h4>C-Sharpcorner.com <small>Select a Tab</small></h4>

<div class="tabbed_area">
 <ul class="tabs">

<li><a href="#" title="content_1" class="tab active">Resources</a></li>

<li><a href="#" title="content_2" class="tab">Teachnology</a></li>

<li><a href="#" title="content_3" class="tab">Authors</a></li>

</ul>
 <div id="content_1" class="content">

<ul>

<li><a href="">Home</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="">jobs</a></li>

</ul>

</div>

<div id="content_2" class="content">
 <ul>

<li><a href="">.NET 4.0<small>105 Posts</small></a></li>

<li><a href="">ADO.NET & Database <small>500 Posts</small></a></li>

<li><a href=""> ASP, JavaScript, CSS <small>22 Posts</small></a></li>

<li><a href="">ASP.NET MVC & JQuery <small>150 Posts</small></a></li>

<li><a href="">JQuery <small>3 Posts</small> 150 osts</a></li>

<li><a href="">Silverlight <small>700 Posts</small></a></li>

</ul>
 </div>
 <div id="content_3" class="content">

<ul>

<li><a href="">Mahesh Chand <small>1145 Posts</small></a></li>

<li><a href="">Dhananjay Kumar <small>445 Posts</small></a></li>

<li><a href="">Arun Choudhary<small>50 Posts</small></a></li>

<li><a href="">Amit Maheshwari <small>90 Posts</small></a></li>

<li><a href="">Deepak Dwij<small>60 Posts</small></a></li>

<li><a href="">Akshay Teotia <small>110 Posts</small></a></li>
 </ul>
 </div>
 </div>
</div>

</body>

</html>

Step 9: In this step we will see the design of the Default2.aspx page which is given below.

img3.jpg

Step 10: In this step we are going to run the Default2.aspx page by pressing F5.

img4.jpg

Click on the next tab to see the effect.

img5.jpg

img6.jpg

Resources

A Tabbed Slider Using jQuery
Versatile Tab Using jQuery
Ajax tab control using CSS
Animated Menu Using jQuery and CSS