JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<ul>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
</ul>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

div{
    width:100px;
    height: 100px;
    position: absolute;
    display: none;
    opacity:0;
}
.one{
    background: red;
}
.two{
    background: green;
}
.three{
    background: orange;
}

JavaScript

$("li").click(function(){
    var getIdName = $(this).attr('id');
    var checkClass = $(this).hasClass('li_active');
    if($(this).hasClass('li_active') == false){
        $("div").animate({"opacity":"0"}, 300);
        $(this).addClass('li_active').siblings().removeClass('li_active');
        setTimeout(function(){
            $("div").css("display","none");
            $("." + getIdName).css({"display": "block"}).animate({"opacity": "1"}, 300);
        }, 300);
    }
});