Post
Ask Question

A Small Tabbed Information Box Using jQuery and CSS


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.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.

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

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

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


Similar Articles