<!--HTML-->
<div class="divMain">
<div>Question 1</div>
<div>Question 2</div>
<div>Question 3</div>
<div>Question 4</div>
<div>Question 5</div>
<div>Question 6</div
</div>
<button name="prev">Prev</button>
<button name="next">Next</button>
<!--jQuery-->
$(document).ready(function () {
var divs = $('.divMain>div');
var now = 0;
divs.hide().first().show();
$("button[name=next]").click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
if((now + 1) == divs.length)
$(this).attr('disabled', 'disabled');
$("button[name=prev]").removeAttr('disabled');
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
if(now == 0)
$(this).attr('disabled', 'disabled');
$("button[name=next]").removeAttr('disabled');
divs.eq(now).show(); // or .css('display','block');
});
});
<!--CSS-->
.divMain {
height:300px;
border:1px solid #7C7C80;
}
.divMain>div {
height:100%;
overflow-y:auto;
border:2px solid #AFA9DE;
padding:1em;
box-sizing:border-box;
-moz-box-sizing:border-box;
} This snippet shows how to build a content slider with previous and next button using jQuery. You can see the working demo here: http://jsfiddle.net/WGkPV/285/This snippet shows how to build a content slider with previous and next button using jQuery.
