• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
JQuery

A Small Tabbed Information Box Using jQuery and CSS

  • WhatsApp
  • Sapna
  • 12y
  • 6.1k
  • 0
  • 0
    • 100
  • Article
TabDemo.rar

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

  • A Small Tabbed Information Box Using jQuery and CSS
  • A tab box in jQuery
  • jquery
  • JQuery Tab Animation
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    Printing in C# Made Easy
    Read by 10.8k people
    Download Now!
    Learn
    View all
    Learn Image
    Xamarin Jump Start
    Leaderboard
    View all
    Sarthak Varshney

    Sarthak Varshney
    +0
    Deepak Tewatia

    Deepak Tewatia
    +0
    View all
    Yesterday's leader
    Sarthak Varshney  
    Sarthak Varshney
    Pune (India)
    70
    102
    1.7k
    100
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.4k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    21.1k
    19.7k
    10
    Upcoming events
    View all
    • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Mahesh Chand Mahesh Chand
    Follow
    Nilesh Jadav Nilesh Jadav
    Follow
    Ben Chris Ben Chris
    Follow
    Alistair Cook Alistair Cook
    Follow
    Jemmy Jackson James Jemmy Jackson James
    Follow

    CSharpBot

    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    Sign-Up Now

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    Sign-Up Now

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.