jquery tabs select with example code

The main idea of jquery tabs creating

Creating tabs in jquery is very simple if you do code technically. Suppose we have three buttons html-button, css-button, and javascript-buttons and three content divs like html-content, css-content, javascript-content.
Now for HTML-button click, we will show html-content div. So somehow we need to understand which button we clicked.
To understand which button we clicked we will use the HTML data attribute to the button. The value of the data attribute will be the name of the button.

<a data-tabName="html" href="#">HTML</a>
    <div class="tab" id="html">
    <h2>This is HTML tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>

Note:we will keep the button name and content name the same. That means the button’s data attribute and the ID of the content div will be the same.

HTML tabs stracture

You already got some basic idea of HTML tabs structure, but in this section, you will learn the complete process with example code.

jquery Tabs buttons structure

We can use HTML buttons tag or anchor tab, button if you use anchor tag make sure you put # as the value of href. If you don’t use # in href you will face probole when you click on the buttons.
Also, we will use html list tag, so that we can handle all buttons easily. The main important part of html tab’s button design is html data attributes, be careful of using this. Make sure you use the same value in data attributes and content div’s ID.

<div id="tabButton">
    <ul>
        <li><a data-tabName="html" class="active" href="#">HTML</a></li>
        <li><a data-tabName="css" href="#">CSS</a></li>
        <li><a data-tabName="javascript" href="#">JavaScript</a></li>
        <li><a data-tabName="php" href="#">PHP</a></li>
        <li><a data-tabName="mysql" href="#">MySQL</a></li>
    </ul>
</div>

Jquery Tabs content div structure.

To create a container div for jquery tabs, simply we will use html div tab. For each tag, we will use a single div. The main part is the ID of the div. We need the use the same value in the ID of the button’s data attributes. The placement of every single div is not mattered, because at a time will show only one div so you can keep your div random orderly.

<div id="html">
    <h2>This is HTML tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>
<div id="css">
    <h2>This is css tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>
<div id="javascript">
    <h2>This is javascript tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>
<div id="php">
    <h2>This is php tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>
<div id="mysql">
    <h2>This is mysql tab</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias,</p>
</div>

jquery tabs Design in CSS

You can design your tabs as your choice. But the main part is at the initial stage you need to show only one content div.That means at the initial stage only one tab will be active and the other will be deactivated.
So you need to design two active classes one for your button and another for your content div.

#myTab #tabButton ul li .active{
    background: #c5e6c5;
    border-top: 2px solid #48a200;
}
#myTab #tabContent .tab{
    Display:none; /* hide all tab */
}
#myTab #tabContent .active{
    display:block;
    background:#c5e6c5;
}       

Note: we will add this active class using jquery after clicking the buttons.

jquery tabs select source code

The main idea of creating tabs in jquery is to show and hide a div. That means if you click on the html-button we will show html-content div and all tabs will be hidden.
In jquery to show and hide any element, we can use the jquery show, hide method or we can add remove class using jquery or we can use raw CSS in the div. But finally, all of them is the same because all of the processes will add CSS display none for hiding and display block for showing.
So in this case, we will use add, remove class process. That means if we click on the html-button we will add an active class to this button and remove the active class from all other buttons. Similarly, we will add an active class to the targeted content-div and remove it from all other content-div.

$("#tabButton ul li a").click(function(e){
    
    // active deactivate tab buttons
    $("#tabButton ul li a").removeClass('active');
    $(this).addClass('active');
    
    // show hide tab content
    var tabName = $(this).attr('data-tabName');
    $("#tabContent .tab").removeClass('active');
    $("#tabContent #"+tabName).addClass('active');
    
    // stop reload
    e.preventDefault();
})

Note:we can use the jquery fadeIn and fadeOut method to show and hide with some little bit of animation.

Jquery tab switch from anywhere

To switch tab from anywhere in jquery we just need the name of the tab. Suppose if we want to switch to the php-content tab to click a button we need some steps like

• Remove active class from all button
• Add active class to the php-buttons
• Remove active class from all content-div
• Add active class to the php-content div

$("#switchToPHP").click(function(e){
    var tabName = "php"; // tab name
    
    $("#tabButton ul li a").removeClass('active'); // remove from all buttons
    $("#tabButton ul li a[data-tabName="+tabName+"]").addClass('active'); // add to the targeted button
    
    $("#tabContent .tab").removeClass('active'); // remove from all tabs
    $("#tabContent #"+tabName).addClass('active'); // add to the targedted tabs
    
    e.preventDefault();
})

Note: remember our tab name and div id is the same.