Question

I have multiple unordered lists on my page. In each list, I want to show only the first five list items by default, then have a link that toggles the display of the remaining items on and off.

I started off with this:


$("ul li").slice(5).hide();


But that ends up hiding all items in all lists except for the first five in the first list, because they all get counted together.

How can I do this but have it affect each list individually (note that I can’t add unique IDs to each list)?

Answer 1

You would need to use the each function to do this for each and every <ul> you have. Try something like this:

$("ul").each(function(){
  $(this).children().slice(5).hide();
});

Then use some code like this to show them all:

$("#btn").click(function(){
   $("ul").each(function(){
      $(this).children().show();
   });
});  

Here is a jsfiddle:
http://jsfiddle.net/F8ByE/

Hope this helps 🙂