JSFiddle - React, Tailwind, and code Playground

HTML

<div class='extra'> Hi</div>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<div id="content">

			<div class='one'>

				<div class='one-1'>test test test test</div><br>
				<div class='one-2'>test test test test</div><br>
				<div class='one-3'>test test test test</div><br>

			</div>

			<div class='two'>


				<div class='two-1'>test test test test</div><br>
				<div class='two-2'>test test test test</div><br>
				<div class='two-3'>test test test test</div><br>

			</div>


			<div class='three'>


				<div class='three-1'>test test test test</div><br>
				<div class='three-2'>test test test test</div><br>
				<div class='three-3'>test test test test</div><br>

			</div>	
  </div>

CSS

ul li{
    
    display:inline-block;
    background: red;
    cursor: pointer;
}


#content{
    
    width:100%;
}

.three{

  margin: 0 auto;
 
  width: 0px;
  display: none;
  height: 360px;

  text-align: center;

background: #EEE836;

font-size: 50px;
  margin-bottom: 180px;
}

.two{

  margin: 0 auto;
 
  width: 0px;
  display: none;
  height: 360px;

  text-align: center;

background: blue;

font-size: 50px;

  margin-bottom: 180px;
}

.one{

  margin: 0 auto;
 
  width: 800px;
  margin-bottom: -180px;
  height: 360px;
  background: white;
  text-align: center;

background: red;

font-size: 50px;



}

JavaScript

$(document).ready(function(){

var ongoing=false;
var selected="one";

$("ul li").click(function(){

console.log("ongoing : " +ongoing);

	if($(this).index() == 1 && selected != "two" && !ongoing ){
      console.log("clicked two and in");
      console.log(ongoing);
    ongoing=true;
		var text=$("ul li:nth-child(1)").text();
    console.log(text);    

		$("."+selected+" div").animate({"opacity": 0},1000,function(){
  		$("."+selected).animate({'width': '0px'},1000,function(){
            $("."+selected).hide();
            $(".extra").animate({"color": "blue"},1000);
            $("."+text).show().animate({'width': '800px'},1000,function(){
                 		selected=text;
                 		$("."+selected+" div").each(function(i){ 
                  		 $(this).delay(i*2000).animate({"opacity": 1},2000,function(){
                        console.log(i + " is finished");
                        if(i == 2){
                          ongoing=false; 
                        }
                       });		
                   	});
                
                    
            }); 
      });
    });


	}

  else if($(this).index() == 2 && selected != "three" && !ongoing){
      console.log("clicked about and in");
       console.log(ongoing);
    ongoing=true;
    var text=$("ul li:nth-child(2)").text();
    console.log(text);    

    $("."+selected+" div").animate({"opacity": 0},1000,function(){
          $("."+selected).animate({'width': '0px'},1000,function(){
                $("."+selected).hide();
                $(".extra").animate({"color": "red"},1000);
                $("."+text).show().animate({'width': '800px'},1000,function(){
                      selected=text;
                      $("."+selected+" div").each(function(i){ 
                            $(this).delay(i*2000).animate({"opacity": 1},2000,function(){
                              console.log(i + " is finished");
                              if(i == 2){
                               ...