Jquery Next Previous Code - Jquery
How to find previous or next content using jquery code?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Simple jquery code to find the next or previous element from the current element.
<script type='text/javascript'>
$(document).ready(function(){
$("#next").click(function(){
if ($(".demo div:visible").next().length != 0)
{
$(".demo div:visible").next().show().prev().hide();
$("#prev").removeAttr("disabled");
var last = $(".demo div:visible").html();
if (last=='Fifth Div') {
$("#next").attr("disabled", true);
$("#prev").removeAttr("disabled");
}
}
else {
$(".demo div:visible").hide();
$(".demo div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".demo div:visible").prev().length != 0)
{
$(".demo div:visible").prev().show().next().hide();
$("#next").removeAttr("disabled");
var first = $(".demo div:visible").html();
if (first=='First Div') {
$("#prev").attr("disabled", true);
$("#next").removeAttr("disabled");
}
}
else {
$(".demo div:visible").hide();
$(".demo div:last").show();
}
return false;
});
$(".demo div").each(function(e) {
if (e != 0)
$(this).hide();
$("#prev").attr("disabled", true);
});
});
</script>
<div align='center'>
<div class="demo">
<div class="cls1">First Div</div>
<div class="cls2">Second Div</div>
<div class="cls3">Third Div</div>
<div class="cls4">Fourth Div</div>
<div class="cls5">Fifth Div</div>
</div>
<input type='button' id='prev' value='Previous'>
<input type='button' id='next' value='Next'>
</div>
