JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div id="area-wrap">
       <div class="btn prev">PREV</div>
    <!-- First Panel (Start) -->
    <div class='box'>
    <div class="left-panel1">1st Panels</div>
    </div>
    <!-- Second Panel (Hidden) -->
    <div class='box hidden'>
        <div class="left-panel1">2nd Panels</div>
    </div>
    <!-- Third Panel (Hidden) -->
    <div class='box hidden'>
    <div class="left-panel1" >3rd Panels</div>
    </div>
    <div style="clear:both"></div>

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

CSS

.hidden{
display:none;
}
#area-wrap {
    position: relative;
    padding: 20px;
    overflow: hidden;
}
.left-panel1 {
    position: relative;
    width: 260px;
    height: 30px;
    background:#fff;
}
.btn{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).slideDown();
    });

});