JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<ul class='headers'>
    <li><a href='#header1'>→ header 1</a></li>
    <li><a href='#header2'>→ header 2</a></li>
    <li><a href='#header3'>→ header 3</a></li>
</ul>
<div id='header1'>
    Hi, this is header1.<hr>
</div>
<div id='header2'>
    This is the header2.<hr>
    <ul class='tabs'>
        <li><a href='#tab1'>header2 → tab1</a></li>
        <li><a href='#tab2'>header2 → tab2</a></li>
        <li><a href='#tab3'>header2 → tab3</a></li>
    </ul>
    <div id='tab1'>
        This is tab1.<hr>
    </div>
    <div id='tab2'>
        This is tab2.<hr>
    </div>
    <div id='tab3'>
        This is tab3.<hr>
        <ul class='ps'>
            <li><a href='#p1'>header2 → tab2 → p1</a></li>
            <li><a href='#p2'>header2 → tab2 → p2</a></li>
        </ul>
        <div id='p1'>
            This is p1.<hr>
        </div>
        <div id='p2'>
            This is p2.<hr>
        </div>
    </div>
</div>
<div id='header3'>
    And this is header3.<hr>
</div>

<div class="helpers">
    <p id="header1-tab1"></p>
    <p id="header1-tab2"></p>
    <p id="header1-tab3"></p>    
    <p id="header2-tab3-p1"></p>
    <p id="header2-tab3-p2"></p>
</div>

CSS

ul {
    margin: 20px 0 10px;
}
ul li {
    display: inline;
    margin-right: 10px;
    padding: 0 4px;
    
}
div {
    color: purple;
    font-size: 0.9em;
    margin-left: 10px;
}
strong {
    font-weight: bold;
}
.active {
    background: #999;
}
.active * {
    color: #000;
    text-decoration: none;
}
.helpers {
    display: none:
}

JavaScript

$.fn.myTabs = function() {

    return this.each(function() {
        
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.parent('li').addClass('active');
        $content = $($active.attr('href'));
        

        // Hide the remaining content
        $links.not($active).each(function () {
                $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.parent('li').removeClass('active');
                $content.hide();
        

                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.parent('li').addClass('active');
                $content.show();
        

                // Prevent the anchor's default click action
                e.preventDefault();
        });
    });

};


$('.headers, .tabs, .ps').myTabs();