CODEWITHSUNDEEP
javascriptjqueryhtml
btmach
btmach

Reputation: 375

Load more li's in ul - JQuery

I'm working on a project where I have reviews and want to display first 3 and when you press load more it should load three more reviews. I am not good at JQuery and found this code, seemed to work first, but it's showing all my results at once and the load more doesn't really do the trick. (I've skipped the show less part, unless someone can help me fix it)

HTML:

    <ul id="results">
        <li>...CONTENT1...</li>
        <li>...CONTENT2...</li>
        <li>...CONTENT3...</li>
    </ul>
<div id="loadMore">Load more</div>

JQuery:

<script type='text/javascript'>
        $(window).load(function(){
        $(document).ready(function () {
            size_li = $("#results li").size();
            x=3;
            $('#results li:lt('+x+')').show();
            $('#loadMore').click(function () {
                x= (x+5 <= size_li) ? x+5 : size_li;
                $('#results li:lt('+x+')').show();
                 $('#showLess').show();
                if(x == size_li){
                    $('#loadMore').hide();
                }
            });
            $('#showLess').click(function () {
                x=(x-5<0) ? 3 : x-5;
                $('#results li').not(':lt('+x+')').hide();
                $('#loadMore').show();
                 $('#showLess').show();
                if(x == 3){
                    $('#showLess').hide();
                }
            });
        });
        });
    </script>

Upvotes: 0

Views: 547

Answers (1)

Kautil
Kautil

Reputation: 1331

you need to hide them initially,

#results li {display:none;}

Upvotes: 1

Related Questions