JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<div id="area-wrap">

    <!-- First Panel (Start) -->
    <div class='box'>
    <div class="left-panel1">1st Panels</div>
    <div class="right-panel1">1st Panels</div>
    </div>
    <!-- Second Panel (Hidden) -->
    <div class='box hidden'>
        <div class="left-panel2">2nd Panels</div>
        <div class="right-panel2">2nd Panels</div>
    </div>
    <!-- Third Panel (Hidden) -->
    <div class='box hidden'>
    <div class="left-panel3" >3rd Panels</div>
    <div class="right-panel3">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

var active = 0;
$('.btn').click(function() {
    var $btn = $(this);
    var $box = $('#area-wrap').find('.box'); 
    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        } 
        $box.eq(active).delay(500).slideDown();
    });

});