JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<button class="date-nav-prv">< Prev</button><br />
<div class="user-actions today visible-actions">
    Today's Actions</div>
<div class="user-actions yesterday">
    Today's Actions</div>

CSS

.user-actions.yesterday, .user-actions.daysAgo2 {display:none;}
.user-actions {width:320px; height:450px; border:1px solid #333;}
.today {background:green;}
.yesterday {background:yellow;}
.daysAgo2 {background:orange;}

JavaScript

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