JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="btn_1" value="Button1"/>
<input type="button" id="btn_2" value="Button2"/>
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>

CSS

#box1, #box2 { 
    width: 150px; 
    height: 150px; 
    background: red; 
    top: 25px;
    position: absolute;
}
#btn_1{
    position: absolute;
    
}
#btn_2{
    position: absolute;
    left: 50px;
}

JavaScript

$(function() {
    $('#box1, #box2').hide();
    
    $('#btn_1').click( function () {
        $('#box1').show('slide', { direction: 'up' }, 1000);
    })
    $('#btn_2').click( function () {
        $('#box1').hide('slide', { direction: 'up' }, 1000, function () {
            $('#box2').show('slide', { direction: 'up' }, 1000);
        });
    })
})