Hi All,
I have 1000 divs and 20 are visible and remain all are hidden ,onclik jquery event, I want next 20 divs are visible and so on.Can anybody hep me? Thanks! Zahid
zahidpugc 0 Newbie Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
Just as an fyi for future posts... try to stick to one thread per question. These duplicate threads do not result in the most optimized result, especially for future visitors that may experience the same issue or have a similar question.
http://www.daniweb.com/web-development/threads/426199/onclick-show-next-divs
rvcT 0 Newbie Poster
check this code i have made also back button
<html>
<head>
<style type="text/css">
div {display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var ptr = 0;
var step = 2;
var max = 10;
function next() {
if((ptr * step) == max) return;
var current;
current= (ptr * step) + 1;
if(ptr > 0) {
for(i=current,j=current-1;i < current + 2;i++,j--) {
$('#i-'+i).css('display','block');
$('#i-'+j).css('display','none');
}
}else{
for(i=current;i < current + 2;i++) {
$('#i-'+i).css('display','block');
}
}
ptr++;
}
function back() {
if(ptr==0) return;
var current = ptr * step;
if(ptr > 1) {
for(i= current , j= current-2; i > current - 2; i--,j--){
$('#i-'+i).css('display','none');
$('#i-'+j).css('display','block');
}
}else{
for(i= current; i > current - 2; i--)
$('#i-'+i).css('display','none');
}
ptr--;
}
</script>
</head>
<body>
<input type="button" value="next" onclick="next()" />
<input type="button" value="back" onclick="back()" />
<div id="i-1">1</div>
<div id="i-2">2</div>
<div id="i-3">3</div>
<div id="i-4">4</div>
<div id="i-5">5</div>
<div id="i-6">6</div>
<div id="i-7">7</div>
<div id="i-8">8</div>
<div id="i-9">9</div>
<div id="i-10">10</div>
</body>
</html>
u can change step to 20 to suite your case i made it 2 for testing
also change max to 1000 instead of 10
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.