JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="tab1">Tab One</li>
    <li id="tab2">Tab Two</li>
</ul>
    
<div id="tabone">Tab one</div>
<div id="tabtwo">Tab Two</div>

CSS

#tabone{
        width:200px;
        height:38px;
        border:solid blue;
        margin:10px;
}
#tabtwo{
        width:200px;
        height:38px;
        border:solid black;
        margin:10px;
}
#tab1:hover{
        cursor:pointer;
}
#tab2:hover{
        cursor:pointer;
}

JavaScript

$('#tab1').click(function(){
    var h = $('#tabone').height();
    if(h < 185){    
        $('#tabone').animate({height:'185px'});
        $('#tabtwo').animate({height:'38px'});
    }
    else $('#tabone').animate({height:'38px'});
});

$('#tab2').click(function(){
    var h = $('#tabtwo').height();
    if(h < 185){    
        $('#tabtwo').animate({height:'185px'});
        $('#tabone').animate({height:'38px'});
    }
    else $('#tabtwo').animate({height:'38px'});
});