CODEWITHSUNDEEP
jquery
Joshua Payne
Joshua Payne

Reputation: 33

How do i display only 5 Li's and have a button that displays 5 more

I have 500 li's but I only want to show 5 at first, then I can click a button and that shows me more li's and maybe at the end there are no more li's but not all of them just another 5?

Upvotes: 2

Views: 1170

Answers (2)

alex
alex

Reputation: 490333

var $li = $("li"),
    chunk = 5;

$li.slice(chunk).hide();

$("button").click(function() {
    $li.filter(":hidden").slice(0, chunk).show();
});​

jsFiddle.

There are more efficient ways to write this code, but this one is fairly readable.

Upvotes: 5

Jamiec
Jamiec

Reputation: 136124

You could dynamically add a "more" button after your ul and show 5 li's at a time until all are shown. Then you could hide the more button:

var vis = 5;
$('li').slice(vis).hide();

var $more = $('<a href="#">test</a>')
$more.click(function(){
    $('li:hidden').slice(0,vis).show();
    if($('li:hidden').length == 0)
        $more.hide();
});
$('ul').after($more);

Live example: http://jsfiddle.net/JKWtP/

Upvotes: 2

Related Questions