JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<ul class="htabs hide">
    <li><h2><a href="#design">Graphic design</a></h2></li>
    <li><h2><a href="#development">Development</a></h2></li>
    <li><h2><a href="#freebies">Freebies</a></h2></li>
</ul>
<div class="tabs">
    <div id="design" class="tab">
        <ul>
            <li><a href="#">TYpography</a></li>
            <li><a href="#">TYpoface</a></li>
            <li><a href="#">painting</a></li>
            <li><a href="#">Optical balance</a></li>
        </ul>           
    </div>
    
    
    <div id="development" class="tab">
        <ul>
            <li><a href="#">TYpography</a></li>
            <li><a href="#">TYpoface</a></li>
            <li><a href="#">painting</a></li>
            <li><a href="#">Optical balance</a></li>
        </ul>           
    </div>
    
    
    <div id="freebies" class="tab">
        <ul>
            <li><a href="#">TYpography</a></li>
            <li><a href="#">TYpoface</a></li>
            <li><a href="#">painting</a></li>
            <li><a href="#">Optical balance</a></li>
        </ul>           
    </div>
    
    
    
</div>

JavaScript

$(document).ready(function() {

    $(".tab:not(:first)").hide();
    $(".tab:first").show();

    $(".htabs a").click(function() {

        var stringref = $(this).attr("href").split("#")[1];

        $(".tab:not(#" + stringref + ')').hide();

        //fix 
        if (jQuery.browser.msie && jQuery.browser.version.substr(0, 3) == "6.0") {

            $('.tab #' + stringref).show();
        } else {
            //$("tab #"+stringref).fadeIn(); // Missing a . on this line
            $(".tab #" + stringref).fadeIn(); // Added the .
            return false;
        }
    });