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/

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 — adeneo, Jul 19 '13 at 01:44
Thanks @adeneo I've just made an edit to instead show the next 5 list items instead of load. — JV10, Jul 19 '13 at 02:34

score 58 · Accepted Answer · edited May 06 '19 at 14:22

58

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/

edited May 06 '19 at 14:22

JaredMcAteer

21,688
5
49
65

answered Jul 19 '13 at 02:39

Tushar Gupta - curioustushar

58,085
24
103
107

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? – JV10 Jul 19 '13 at 02:46
That works well @tushar-gupta but how do I first load my externalList.html file with this script? – JV10 Jul 19 '13 at 03:07
include the external html file in page – Tushar Gupta - curioustushar Jul 19 '13 at 03:28
1

This script is very helpful to everyone – Sandeep Vishwakarma Jun 14 '18 at 12:51
@TusharGupta Can we use this like as sub div with certain class .abc inside a outermost div with id #mylist Please help me http://jsfiddle.net/nFd7C/1960/ – Aug 11 '18 at 08:57
@TusharGupta Here is the new js fiddle http://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 – Aug 11 '18 at 09:32
$(document).ready(function() deprecated in jQuery3, use $(function() instead as per official documentation. – Kaiser Mar 28 '19 at 19:17

score 14 · Answer 2 · answered Jul 19 '13 at 02:57

14

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();
    });
});

answered Jul 19 '13 at 02:57

Optimus Prime

6,817
5
32
60

1

I like the feature that hides the "show more" link when there's no more to be shown. It looks neater. – Mr. Lance E Sloan Nov 18 '13 at 15:34
7

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: http://jsfiddle.net/santosh_patnala/nFd7C/422/ – UiUx Nov 14 '14 at 12:49
Hi, How can I adapt this JS say for 3 different blocks? :-/ I tried adding different IDs but no luck. Any suggestions? :) – user2513846 Dec 17 '15 at 00:22
Can we use this like as sub div with certain class inside a outermost div with id #mylist Please help me http://jsfiddle.net/nFd7C/1960/ – Aug 11 '18 at 08:56
@OptimusPrime Here is the new js fiddle http://jsfiddle.net/nFd7C/1965/ i want to show first three images and then add two after clicking on load more – Aug 11 '18 at 09:31
@Optimus Prime @UiUx 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? – atsngr Sep 21 '19 at 18:33

score 10 · Answer 3 · answered Mar 28 '19 at 19:47

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;
}

Hi Kaiser, could be interesting also manage disabled of button when full list is reached — Luca Detomi, Jun 16 '23 at 08:13

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

3 Answers3

New JS to show or hide load more and show less

Linked

Related