JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentBlock"></div>

<div class="contentHidden" id="page_1"><img src="http://static.guim.co.uk/sys-images/Media/Pix/pictures/2009/8/7/1249658032228/Stuff-magazine---Septembe-001.jpg" border=0 width=990 height=250></div>
<div class="contentHidden" id="page_2">Page 2 content</div>

<div id="navBar">
    <span id="prev">[COLLAPSE]</span>
     <span id="next">[EXPAND]</span>
</div>

CSS

.contentHidden {
    display: none;
}

#prev, #next {cursor: pointer}

#contentBlock {
  width: 990px;
    height: 300px;
}

JavaScript

$(document).ready(function() {
    var pages = 2;
var page = 1;
$("#contentBlock").html($("#page_1").html());

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

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