JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
    <div class="box1_content">
        <div class="box2"><a href="#" class="turn_next">Go to Box3</a></div>
        <div class="box3"><a href="#" class="turn_back">Go to Box2</a></div>
    </div>
</div>

CSS

.box1 {
    background-color:#ccc;
    width:300px;
}

.box1_content {
    width:80%;
    margin:0 auto;
}

.box2 {
    width:100%;
    background-color:red;
    min-height:100px;
}

.box3 {
    width:100%;
    background-color:yellow;
    min-height:300px;
    display:none;
}

JavaScript

$(".turn_next").click(function(){
   $(".box2").hide();
   $(".box1_content").animate({height:'300px'}, 300,function(){
         $(".box3").show('slide', {direction: 'right'}, 500);
   });
});

$(".turn_back").click(function(){
   $(".box3").hide();
   $(".box1_content").animate({height:'100px'}, 300,function(){
       $(".box2").show('slide', {direction: 'left'}, 500);
   });
});