You can accomplish this by showing and hiding the divs programatically. Check out this fiddle for a working solution (tested in chrome):
http://jsfiddle.net/bHS93/1/
You are simply applying css styles to the proper div and maintaining the last known state. You can spruce this up by adding transitions with a library like jQuery. Remember to updat eth
<!-- PREVIOUS / NEXT -->
<span id="go-prev">Previous</span>
<span id="go-next">Next</span>
<!-- CONTAINER -->
<div id="container">
<!-- SECTION 1 -->
<div class="section current" id="section-1">Section1</div>
<!-- SECTION 2 -->
<div class="section" id="section-2">Section2</div>
<!-- SECTION 3 -->
<div class="section" id="section-3">Section3</div>
<!-- SECTION 4 -->
<div class="section" id="section-4">Section4</div>
<!-- SECTION 5 -->
<div class="section" id="section-5">Section5</div>
</div>
the CSS
.section {
display: none;
}
.current {
display: block;
}
and the JS
var prev = document.getElementById('go-prev'),
next = document.getElementById('go-next'),
pagination = (function () {
var pages = [1, 2, 3, 4, 5], //the number of 'pages'
current = 0;
page = function (forward) {
//reset visible div
document.getElementById('section-' + (current + 1)).className = 'section';
//traverse to the next one if we're not already at the beginning or end
if (forward) {
if (current < pages.length - 1) {
current++;
}
} else {
if (current > 0) {
current--;
}
}
document.getElementById('section-' + (current + 1)).className = 'section current';
};
return page;
})();
prev.onclick = function () {
pagination(false);
};
next.onclick = function () {
pagination(true);
};
