JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a class="fading" relDiv="one" href="">Catergory</a></li>
    <li><a class="fading" relDiv="two" href="">styles</a></li>
    <li><a class="fading" relDiv="three" href="">brand</a></li>
</ul>


<div id="one" class="relDiv">This is my category</div>
<div id="two" class="relDiv">This is styles</div>
<div id="three" class="relDiv">This is main brands</div>

CSS

#two, #three, #four{
    display:none;
}

JavaScript

var currentDiv = 'one';
$(".fading").click(function(e){
    e.preventDefault();
    $this = $(this);
    if (currentDiv != $this.attr('relDiv')){
        $("#" + currentDiv).fadeOut( "slow", function() {
            $("#" + $this.attr('relDiv')).fadeIn();
        });
    }   
    currentDiv = $(this).attr('relDiv');
});