JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div class="tabs">    
        <a href="#header1">→header1</a>
        <a href="#tab1">→tab1</a>
        <a href="#tab2">→tab2</a>
        <a href="#header2">→header2</a>    
    </div>
    
    <div class="helpers">
        <a href="header1-tab1-p1">→p1</a>     
        <a href="header1-tab1-p2">→p2</a>      
        <a href="header1-tab2-p3">→p3</a>     
        <a href="header2-header1-tab2-p4">→p4</a>
    </div>
        
    <div class="content">
        
        <div id="header1">
            header1 is visible
            <div id="tab1">
                tab1 under header1 is visible                
                <p id="header1-tab1-p1">p1</p>
                <p id="header1-tab1-p2">p2</p>
            </div>
            <div id="tab2">
                tab2 under header1 is visible
                <p id="header1-tab2-p3">p3</p>
            </div>
        </div>
        
        <div id="header2">
            header2 is visible & h1 should be too
            <p id="header2-header1-tab2-p4">p4</p>
        </div>
    
    </div>

CSS

.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.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.removeClass('active');
                $content.hide();
        

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

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

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

$('.tabs').myTabs();