JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<h3>This is a simple exercise to create a sophisticated tab control using jQuery.</h3>
<p> Create Tab Header or tabs by assigning IDs to each element as 
    “tab1”, “tab2” and “tab3”.</p>
<p>create separate div's for each tab content.Set first element as selected by assigning CSS class “selectTabHeader”.</p>
<div id="tabArea">
    <div id="tabHeader">
        <a id="tab1" class="tab selectTabHeader">Tab 1 </a>
        <a id="tab2" class="tab">Tab 2</a>
        <a id="tab3" class="tab">Tab 3 </a>
   </div>
    <div id="tabData">
        <div id="tab-data" class="tab1 selectedTab">
            tab 1 data
        </div>
        <div id="tab-data" class="tab2">
                tab 2 data
        </div>
        <div id="tab-data" class="tab3">
            tab 3 data
        </div>
    </div>
</div>

CSS

//by default we are hiding all tab content using css
#tab-data
{
    display: none;
}
        
#tab-data.selectedTab
{
    display: block;
    color: black;
    background: white;
    height: 400px;
    padding: 5px;
}

JavaScript

//Register click event of all header buttons.
//On the click of element, remove “selectTabHeader” CSS class from last selected element.

$('.selectTabHeader').removeClass('selectTabHeader');


//assign selected CSS class to clicked element
$(this).addClass('selectTabHeader');

 //Get the id of click element.If user clicked on “tab2”. Remove the class "selectedTab" of last selected content.

var v = this.id;
$('.selectedTab').removeClass('selectedTab');


$('.' + v).addClass('selectedTab');

// show the content area of the selected element.
//find the HTML element which has the CSS class same as the id of selected element.

$(document).ready(function () {

    $('#tabHeader a').click(function () {

            // Set header
            $('.selectTabHeader').removeClass('selectTabHeader');
            $(this).addClass('selectTabHeader');

            // Show Actual area
            var v = this.id;

            $('.selectedTab').removeClass('selectedTab');

            $('.' + v).addClass('selectedTab');
    });
});