jQuery load first 3 elements, click "load more" to display next 5 elements

Question

I have an unordered list:

<ul id="myList"></ul>
<div id="loadMore">Load more</div>

I wish to populate this list with list items from another HTML file:

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>

I want to load the first 3 list items, then show the next 5 items when the user clicks the "load more" div:

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

I need help though, as I would like the "load more" to show the next 5 list items, but if there are more list items within the HTML file, to again display the "load more" div and allow users to display the next 5 items, repeating this until the entire list is displayed.

How can I best achieve this?

I have created the following jsfiddle: http://jsfiddle.net/nFd7C/

Trichoid

load() will load the entire file with $.get and then just do the filtering on the clientside, so you should load the whole file and do the filtering yourself instead of loading the same content over and over – Brainless

Thanks @Brainless I've just made an edit to instead show the next 5 list items instead of load. – Trichoid

Answer 1

WARNING: size() was deprecated in jQuery 1.8 and removed in jQuery 3.0, use .length instead

Working Demo: http://jsfiddle.net/cse_tushar/6FzSb/

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

New JS to show or hide load more and show less

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

CSS

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

Working Demo: http://jsfiddle.net/cse_tushar/6FzSb/2/

Worked

That's great @tushar-gupta, how will I implement this with my loaded list? Also how can I hide the "load more" once the entire list has been displayed? – Trichoid

That works well @tushar-gupta but how do I first load my externalList.html file with this script? – Trichoid

include the external html file in page – Worked

This script is very helpful to everyone – Irwinirwinn

@TusharGupta Can we use this like as sub div with certain class .abc inside a outermost div with id #mylist Please help me jsfiddle.net/nFd7C/1960 – Humble

@TusharGupta Here is the new js fiddle jsfiddle.net/nFd7C/1965 i want to show first images and then add two after clicking on load more. Please help me with edit code – Humble

$(document).ready(function() deprecated in jQuery3, use $(function() instead as per official documentation. – Crater

Answer 2

Simple and with little changes. And also hide load more when entire list is loaded.

jsFiddle here.

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#showLess').hide();
    var items =  25;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#myList li:visible').size()+5;
        if(shown< items) {$('#myList li:lt('+shown+')').show();}
        else {$('#myList li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

Gluttony

I like the feature that hides the "show more" link when there's no more to be shown. It looks neater. – Zebulun

There is a problem in your fiddle like, first load more items and then show less. Then load more is not visible. I've forked your fiddle and here is the working one: jsfiddle.net/santosh_patnala/nFd7C/422 – Seibert

Hi, How can I adapt this JS say for 3 different blocks? :-/ I tried adding different IDs but no luck. Any suggestions? :) – Schleicher

Can we use this like as sub div with certain class inside a outermost div with id #mylist Please help me jsfiddle.net/nFd7C/1960 – Humble

@OptimusPrime Here is the new js fiddle jsfiddle.net/nFd7C/1965 i want to show first three images and then add two after clicking on load more – Humble

@Optimus Prime @Seibert I had to replace size() with length as per latest jquery rule. However what part of the code needs to changed if you only want to load additional 2 at a time rather than 5? – Monney

Answer 3

The expression $(document).ready(function() deprecated in jQuery3.

See working fiddle with jQuery 3 here

Take into account I didn't include the showless button.

Here's the code:

JS

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

CSS

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

Crater

Hi Kaiser, could be interesting also manage disabled of button when full list is reached – Buckjump