JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div id="book">
    <div id="turn-left">left</div>
    <div id="turn-right">right</div>
<div class="page">Page 1:tempor odio tincidunt a facilisis lorem tempor, est pulvinar augue placerat ut pulvinar? Amet! Integer, platea eros sed enim, auctor, sit auctor egestas, proin natoque porttitor aliquet, cum velit augue montes adipiscing eu porttitor dolor, rhoncus mauris eu. Integer porta tortor, nisi phasellus aliquet sagittis enim nunc! Magnis? Integer augue nec platea ultrices ac sociis a lundium aenean penatibus magna ac a lectus elementum nisi adipiscing lacus, ut augue, eu arcu, aliquet adipiscing elementu</div>
<div class="page">Page 2 tempor odio tincidunt a facilisis lorem tempor, est pulvinar augue placerat ut pulvinar? Amet! Integer, platea eros sed enim, auctor, sit auctor egestas, proin natoque porttitor aliquet, cum velit augue montes adipiscing eu porttitor dolor, rhoncus mauris eu. Integer porta tortor, nisi phasellus aliquet sagittis enim nunc! Magnis? Integer augue nec platea ultrices ac sociis a lundium aenean penatibus magna ac a lectus elementum nisi adipiscing lacus, ut augue, eu arcu, aliquet adipiscing elementu</div>
<div class="page">Page 3 tempor odio tincidunt a facilisis lorem tempor, est pulvinar augue placerat ut pulvinar? Amet! Integer, platea eros sed enim, auctor, sit auctor egestas, proin natoque porttitor aliquet, cum velit augue montes adipiscing eu porttitor dolor, rhoncus mauris eu. Integer porta tortor, nisi phasellus aliquet sagittis enim nunc! Magnis? Integer augue nec platea ultrices ac sociis a lundium aenean penatibus magna ac a lectus elementum nisi adipiscing lacus, ut augue, eu arcu, aliquet adipiscing elementu</div>

</div>

CSS

#book {border:1px solid black; width:250px; margin:10px auto;position:relative;height:400px;}
.page {margin:20px; position:absolute; width:200px;background-color:white;border:1px solid green;}
#turn-left, #turn-right {position:absolute; height:100%;border:1px solid blue; background-color:#CCC;z-index:1000;}
#turn-left {left:0;}
#turn-right {right:0;}

JavaScript

$(document).ready(function() {
    //alert($('div').length);
    var totalDivs = $('div').length;
    $('.page').each(function(index) {
        var pg = $(this).index() + 1;
        $(this).append(pg);
        $(this).css('z-index', totalDivs - pg);
    });

    $('.page').click(function() {
        var itsZindex = $(this).css('z-index');
        alert(itsZindex);
    });

    var top;
    $('#turn-left').click(function() {
        
        $('.page').each(function(){
           top =  parseInt($('.page').css('z-index'));
           //top = Math.max(top, parseInt($(this).css('z-index')));
            
        alert(top);
        });
        
        
        /*
        if ($(this).css('z-index')==top) {
            $(this).animate({"left":"-=550px"},"slow");
        }
        */

    });

    //    $('div').append($('div').index());
});