jquery toggle to work in multiple instances

I have a show/hide effect that works but I just need to be able to use it multiple times in a page. Currently it toggles all elements. Can't get my head around how to do it.

Hope you can help.

http://pastebin.me/29328e5开发者_运维技巧56caf53e9a1925030d65b864b

You can edit your function a bit to this, it'll work on each <ul> indepdently:

$('.facet ul').each(function() {
  if($(this).children('li:gt(9)').hide().length === 0) return;
  $(this).append(
    $('<li id="toggler">More</li>').toggle(function() {
       $(this).text('Hide').siblings().show();
    }, function() { 
       $(this).text('More').siblings('li:gt(9)').hide();
    }));
});​

See a working demo here

Before, it was getting any li over 9, you want to do this per <ul> element with .each() like the example above.

I removed a few bits to simplify, but you can see here for a working implementation... To keep the togglers as li elements, you'll need to expand this to selectively hide sibling elements - but I'm a fan of simplicity, so I'd suggest keeping the togglers outside of the element you want to show/hide.

http://pastebin.me/7a7e139da8cad2b01593d895b668c17e