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.
+2
A:
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();
}));
});
Before, it was getting any li over 9, you want to do this per <ul> element with .each() like the example above.
Nick Craver
2010-03-30 15:08:03
Gotcha. Brilliant. Now I just need to integrate this with the expanding menu code below - should i create a new question?http://pastebin.me/03b685f586fef84193b5fd72e815255d
mark
2010-03-30 15:33:42
@mark - For the sake of future googlers finding this, please do, and comment where it is here, I'll answer it if no one else does shortly.
Nick Craver
2010-03-30 15:42:43
will do. Although I can't post 2 url's yet.
mark
2010-03-30 15:59:48
@mark - Make sure to accept answers as well, this makes your questions more appealing to would-be answerers, gives you rep, them rep, the next person finding this a quick path to the right answer and closes out old questions, all good things. Do this by clicking the checkmark beside the answer that helped you resolve the issue for each question.
Nick Craver
2010-03-30 19:15:30
A:
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.
Andru
2010-03-30 15:13:07
This doesn't do at all what the original script did...he wants to hide/show "more", not "all".
Nick Craver
2010-03-30 15:15:32
yea, it's more once it goes over a certain number the 'more' is displayed. and not if it is less. And then for this to work inside an expanding menu. BASically a space saver for typical indexhibt cms sites like : http://mikeyburton.com/
mark
2010-03-30 15:36:04