Show more list items ( how can I do it in increments of 9 )?

JavaScript
1

Hello!

I’m working on a page where clicking on more items should work similar to how Google Images works. I need it to only show 9 items at a time, and when you click on “more results” it will show another 9 items at a time. If there are less than 9 items left, it would just show the remaining…

I have this jquery right now, which does initially show only 9 items, but after you click show more, it loads all of the remaining items. How would I get it to show them in increments of 9 instead?


$('ul')
  .find('li:gt(8)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);
2

There can be quite a few details to take care of, so the easiest way can be to use a plugin that’s designed for the job instead, such as this pagination plugin.