JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button><br />
<div id="wrapper">
<div class="user-actions daysAgo2">
    Actions from 2 Days Ago</div>
<div class="user-actions yesterday">
    Yesterday's Actions</div>
<div class="user-actions today visible-actions">
    Today's Actions</div>
</div>

CSS

.user-actions.yesterday, .user-actions.daysAgo2, .date-nav-next {display:none;}
#wrapper{width:250px; height:300px; border:1px solid #333;position:relative; float:left; 
 /*overflow:hidden;*/
}
.user-actions {width:100%; height:100%; position:relative; float:left; overflow:hidden; margin:0;}
.today {background:green;}
.yesterday {background:yellow;}
.daysAgo2 {background:orange;}

JavaScript

$('.date-nav-prev').click(function () {
    $('.date-nav-next').show();
    var current = $('.visible-actions');
    var prev = current.prev('.user-actions');
    current.removeClass('visible-actions').animate({
        left: current.width()
    }, 500, function() {
        //current.hide();
    });
    prev.addClass('visible-actions').show().css({
        left: -(prev.width())
    }).animate({
        left: 0
    }, 500);
});

$('.date-nav-next').click(function () {
    var current = $('.visible-actions');
    var next = current.next('.user-actions');
    current.removeClass('visible-actions').animate({
        left: -(current.width())
    }, 500, function() {
        //current.hide();
    });
    next.addClass('visible-actions').show().css({
        left: prev.width()
    }).animate({
        left: 0
    }, 500);
});