JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">Menu</div>
<div id="menu2">Menu2</div>
    <button id="A" class="A_style">A</button>
    <button id="B" class="B_style">B</button>
<button id="C" class="button_style3">C</button>

CSS

#menu {
    height: 250px;
    width: 0px;
    border: 1px solid black;
    display: none;
}

#menu2 {
    margin-right:250px;
    height: 250px;
    width: 0px;
    border: 3px solid black;
    display: none;
}

.A_style {
    position:absolute;
    height: 250px;
    top: 0px;
    width:25px;
    
}

.B_style {
    position:absolute;
    height: 250px;
    margin-left:32px;
    width:25px;
    top: 0px;
 
}

.button_style3 {
    position:absolute;
    height: 250px;
    margin-left:68px;
    width:25px;
    top: 0px;
 
}

JavaScript

$("#A").click(function() {
    var menu = $("#menu");
    var menu2 =$("#menu2");
    
   
    
    if ($(menu).is(":visible")) {
          $(this).animate({left: '0'}, 1000);
         $("#B").animate({left: "0px"}, 1000);   
         $("#C").animate({left: "0px"}, 1000);
         $(menu).animate({width: 0}, 1000, function()
                    
                        {
                            $(menu).hide();
                       
                        });
        
    } else {
        $(menu).show().animate({width: 250}, 1000);   
       $("#B").animate({left: "190px"}, 1000);   
         $("#C").animate({left: "190px"}, 1000);
    }
    
     if ($("#B").is(":visible")) {
        
          
              $(menu2).animate({width: 0}, 1000, function()
                        {
                            $(menu2).hide();
                            
                        });
        
       
    }
    
    
    
});


$("#B").click(function() {
    var menu = $("#menu");
    var menu2 = $("#menu2");
    if ($(menu2).is(":visible")) {
          $("#C").animate({left: '0'}, 1000);
         
        $(menu2).animate({width: 0}, 1000, function()
                        {
                            $(menu2).hide();
                            
                        });
        
    } else {
        $(menu2).show().animate({width: 250}, 1000);    
        
         $("#C").animate({left: "190px"}, 1000);
        
    }
    
    if ($("#A").is(":visible")) {
        
        
            $(menu).animate({width: 0}, 1000, function()
                        {
                            $(menu).hide();
                            
                        });
        
         $("#B").animate({left: "0px"}, 1000);   
          
       
    }
    
    
});

$("#C").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
          $(this).animate({left: '0'}, 1000);
         
        $(menu).animate({width: 0}, 1000, function()
        ...