jquery toggle to work in multiple instances

Question

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/29328e556caf53e9a1925030d65b864b

Answer 1

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.