0

I'm currently trying to write a jquery script that shows only the first 5 list items. What is bothering me is how to make the script show next 5 elements if you click on the loadmore button. Below is the jquery code i am working with. I guess that i need to add plus 5 to the variable x, but i don't know how to do that correclty, and make the next 5 list items show.

Fiddle for complete code

jQuery(document).ready(function () {
    jQuery('.layered-items').each(function(){
        var size = jQuery(this).find('li').length;
        var x = 5;
        jQuery('li:lt('+x+')', this).show(); 

            jQuery('.loadmore-filter').click(function(){

            })
    })
});

Any suggestions? :)

simon
  • 2,235
  • 6
  • 33
  • 53
  • this link may help you . [http://stackoverflow.com/questions/17736786/jquery-load-first-3-elements-click-load-more-to-display-next-5-elements][1] [1]: http://stackoverflow.com/questions/17736786/jquery-load-first-3-elements-click-load-more-to-display-next-5-elements – Gaurav Parashar Apr 05 '14 at 23:34

1 Answers1

1

Just get the index of the last visible LI, and another 5 to show

jQuery(function($) {
    $('.layered-items').each(function(){
        var x = 5;
        $('li:lt('+x+')', this).show(); 
    });
    $('.loadmore-filter').click(function(){
        var ul = $(this).closest('span').prev('ul'),
            x  = $('li:visible:last', ul).index(),
            y  = x + 6;
        $('li:lt('+y+'):gt('+x+')', ul).show();
    });
});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • This actually works, but when i add lets say, three other ul with the same class, it adds 5 to all the ul's and not the specific ul where the load more button been clicked- give sens? So it seems like $(this) is not working proberly :) – simon Apr 05 '14 at 23:36
  • @SimonDuun - makes sense, but the button isn't really related to the UL, so I guess hardcoding based on position is the only way to go, edited the answer. – adeneo Apr 05 '14 at 23:40
  • It's working so cool. And also a very understandable code. Thanks a lot :) – simon Apr 05 '14 at 23:45