SodhanaLibrary

Using jQuery UI for only jQuery Tab system is bad idea because it will eat network bandwidth. If you are not going to use jQuery UI for creating tabs then you can make use of this.

Click Here to see DEMO

As shown in above picture, The Tab system contains 2 main parts
1. Tab display control buttons
2.  Tab Containers

How it Works 

If user clicks on Tab 1 then the code will hide container class elements and open up the container 1 ( 1st element of class container )

It will check index of Tab button and it will open same index container element.

Markup

<div id="tabsDiv">
        <ul id="tabs">
            <li>tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <hr />
        <div class="container">
            <br /> Container 1<br /> <br /> Content Here<br> <br />
        </div>
        <div class="container">
            <br /> Container 2<br /> <br /> Content Here<br> <br />
        </div>
        <div class="container">
            <br /> Container 3<br /> <br /> Content Here<br> <br />
        </div>
</div>

CSS

#tabsDiv #tabs li {
display:inline;
padding:10px;
background-color:#fafafa;
border:1px solid #ccc;
cursor:pointer;
color:#777;
}

#tabsDiv #tabs li.selected {
border-bottom:1px solid #fff;
background-color:#fff;
color:#222;
}

#tabsDiv {
position:relative;
height:auto;
border:1px solid #fff;
}

#tabsDiv #tabs {
top:0px;
left:0px;
position:absolute;
padding-left:0px;
}

#tabsDiv hr {
top:36px;
border:0px;
border-bottom:1px solid #ddd;
position:absolute;
width:100%;
z-index:0;
}

#tabsDiv #tabs {
top:0px;
position:absolute;
z-index:5;
}

#tabsDiv .container {
margin-top:46px;
padding:10px;
display:none;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}