JSFiddle - React, Tailwind, and code Playground

by gfosco

HTML

<div id="contentBlock"></div>
<div id="navBar">
    <span id="prev">[Prev]</span>
    <span id="next">[Next]</span>
</div>
<div class="contentHidden" id="page_1">Page 1 content</div>
<div class="contentHidden" id="page_2">Page 2 content</div>
<div class="contentHidden" id="page_3">Page 3 content</div>

CSS

.contentHidden {
    display: none;
}

#contentBlock {
  border:1px solid black;   
}

JavaScript

var pages = 3;
var page = 1;
$("#contentBlock").html($("#page_1").text());

$("#prev").click(function() {
    if (page > 1) {
        page--;
        $("#contentBlock").html($("#page_" + page).text());
    } 
});

$("#next").click(function() {
    if (page < pages) {
       page++;
       $("#contentBlock").html($("#page_" + page).text());
    } 
});