[jQuery] JQuery Collapsing Lists
Hi
I'm a newbie to JQuery. I have a collapsible list made from an
unordered html list usin the following code I found at
http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery
which works fine. I've even managed to workout how it works :-)
$(document).ready(function() {
// Find list items representing folders and
// style them accordingly. Also, turn them
// into links that can expand/collapse the
// tree leaf.
$('li > ul').each(function(i) {
// Find this list's parent list item.
var parent_li = $(this).parent('li');
// Style the list item as folder.
parent_li.addClass('folder');
// Temporarily remove the list from the
// parent list item, wrap the remaining
// text in an anchor, then reattach it.
var sub_ul = $(this).remove();
parent_li.wrapInner('<a/>').find('a').click(function() {
// Make the anchor toggle the leaf display.
sub_ul.toggle();
});
parent_li.append(sub_ul);
});
// Hide all lists except the outermost.
$('ul ul').hide();
});
Now I need to modify this so that only one branch or sub-branch can be
open at anyone time by closing any other open branches. I've managed
to capture the sibling information I think I need by adding the line
var "siblings_li = $(this).parent('li').siblings();" after the
definition of parent_li and verified through the firebug plugin to
Firefox that it selects the nodes that I expect.
What do I need to put in the click function definition so that the
onClick() a) closes any open sibling branches and b) toggles child
branches - I hope that this makes sense
Regards