JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<div id="area-wrap">

    <!-- First Panel (Start) -->
    <div class="panel">
    <div class="left-panel1">1st Panels</div>
    <div class="right-panel1">1st Panels</div>
    </div>

    <!-- Second Panel (Hidden) -->
    <div class="panel hidden"> 
    <div class="left-panel2">2nd Panels</div>
    <div class="right-panel2">2nd Panels</div>
    </div> 

    <!-- Third Panel (Hidden) -->
    <div class="panel hidden"> 
    <div class="left-panel3">3rd Panels</div>
    <div class="right-panel3" style="display:none">3rd Panels</div>
    </div> 

    <div style="clear:both"></div>

    <div class="btn next">NEXT</div>
    <div class="btn prev">PREV</div>
    
</div>

CSS

.hidden {
    display:none;
}
#area-wrap {
    position: relative;
    padding: 20px;
    background: #CCC;
    overflow: hidden;
}
.left-panel1, .right-panel1, .left-panel2, .right-panel2, .left-panel3, .right-panel3 {
    position: relative;
    width: 200px;
    height: 300px;
    background:blue;
}
.left-panel1, .left-panel2, .left-panel3 {
    float: left;
}
.right-panel1, .right-panel2, .right-panel3 {
    float: right;
}
.btn {
    margin: 20px 0 0 10px;
    width: 75px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background:white;
    border: 1px solid #171717;
    color: #171717;
    overflow: hidden;
    float: right;
    cursor: pointer;
}

JavaScript

$('.next').click(function () {
    $('.panel:visible').slideUp().closest('.panel').nextAll('.panel').eq(0).delay(500).slideDown();
});

$('.prev').click(function () {
    $('.panel:visible').slideUp().closest('.panel').prevAll('.panel').eq(0).delay(500).slideDown();
});