jQuery: Toggle - List

Question

This is a continuation from here: jQuery: List expands on page load

Hi,

Since my previous post, I've worked on another list and come up with this: http://jsbin.com/emaza4/4

As you may see, the first <li> element with a <ul> child (item '#') opens automatically on page load, and the other "parents" stay closed until any one of them is clicked. I achieved this by putting item '#' under class 'abc' and the rest of the items under class 'xyz'.

Next, I would like to be able to click on another parent, say, item "A-F" and it automatically closes any other opened parent, including item '#' that's from a different class ('abc' instead of 'xyz').

Searching "toggle" on this website led me to this: jQuery toggle dynamically

So I tried adding to my code like so: http://jsbin.com/emaza4/3/ but it doesn't seem to be working.

Could anybody point me in the right direction as to how to solve this problem? Thanks in advance. :)

Answer 1

I believe you make the problem a bit overcomplicated. All you need is onclick hide all the sub-menus and open the relevant one. eg.

$('li').click(function (){
  $('ul').hide();
  $(this).find('ul').show();
});

Answer 2

You can just use the hide-only version of .toggle('slow') (.hide('slow')), on the siblings of the clicked <li> in each of your handlers, like this:

$(this).siblings().children().hide('slow');

You can test it out here.