Please enable Javascript for better experience...
Tab panel in HTML
By Big | Aug 7, 2014 | In Articles | Update: Oct 8, 2014 | Total Views [ 6680 ]
Taged In
(4 Like)
Rate

In this article I will try to explain how can we create a tab panel using HTML, CSS and JQuery for UI in few simple steps.

Introduction

If we see from UI point of view, user don't want to click on a link and navigate to next tab to see what they clicked. Rather they want all content in a tabbed view on same page. In this article I will try to explain how to create a tab panel with html, css and jquery.

Code

To demonstrate tab panel I will create a sample HTML code. To make it fully working and interacting I will use css and few lines of jquery. Below is the sample tab panel I will try to create.

Let's first start with a piece of HTML.

HTML

<html>
<head>
<title>BigConcept Tab Panel Example</title>
   <link rel="stylesheet" type="text/css" href="CSS/Style.css">
 <script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="JS/tabpanel.js"></script>
</head>
<body>
  <h3>Tab Panel Example</h3>
    <hr />

        <div class="tab-panel">
            <ul class="tab-link">
                <li class="active"><a href="#FirstTab">First Tab</a></li>
                <li><a href="#SecondTab">Second Tab</a></li>
                <li><a href="#ThirdTab">Third Tab</a></li>
            </ul>

            <div class="content-area">
                <div id="FirstTab" class="active">
                    <p>This is sample tab area in First Tab.</p>
                </div>

                <div id="SecondTab" class="inactive">
                   <p>This is the sample tab area in Second tab.</p>
                </div>

                <div id="ThirdTab" class="inactive">
                    <p>This is the sample tab area in Third tab.</p>
                </div>

            </div>
        </div>
</body>
</html>

CSS

Once I am done with HTML code now it's time to add css to my example. Below is the CSS I used in my example.

Style.css

body {
  background-color: #f3f3df;
width:1000px;
margin:auto;
padding:20px;
}
hr{border:1px solid #EEE; }
a{text-decoration:none;}

/*----------tap panel style------*/
 .tab-panel {
            width: 100%;
            display: inline-block;
        }

        .tab-link:after {
            display: block;
            padding-top: 20px;
            content: '';
        }

        .tab-link li {
            margin: 0px 5px;
            float: left;
            list-style: none;
        }

        .tab-link a {
            padding: 8px 15px;
            display: inline-block;
            border-radius: 10px 3px 0px 0px;
            background: #8dc8f5;
            font-weight: bold;
            color: #4c4c4c;
        }

            .tab-link a:hover {
                background: #b7c7e5;
                text-decoration: none;
            }

        li.active a, li.active a:hover {
            background: #ccc;
            color: #0094ff;
            text-decoration:none;
        }

        .content-area {
            padding: 15px;
            border-radius: 3px;
            box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
            background: #fff;
            border: 1px solid #ccc;
        }

        .inactive{
            display: none;
        }

        .active {
            display: block;
        }

JQuery

Now I am on my final step and my example will be completed. Let's add jquery to my example. Below is the jquery lines I used in my example.

tabpanel.js

$(document).ready(function () {
   $('.tab-panel .tab-link a').on('click', function (e) {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        //Fade effect
        //   $('.tab-panel ' + currentAttrValue).fadeIn(1000).siblings().hide();
        //Sliding effect
        $('.tab-panel ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

        //Sliding up-down effect
       // $('.tab-panel ' + currentAttrValue).siblings().slideUp(400);
        // $('.tab-panel ' + currentAttrValue).delay(400).slideDown(400);

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

Hope this can help you. Use this code and try yourself. I will come with such tips soon.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment