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

Recommended Answers

All 2 Replies

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.