Question

I have two or more unordered lists with the first list item in each visible and the others hidden.

When the first list itme is clicked it should show all the other li below and hide any other li’s that are open in another ul.

I cant seem to get it to show correctly.

I cannot change the class names from the example I have as they are generated deep inside core code and used for other elements.

Thanks for any help.

http://jsfiddle.net/ukkpower/En7KV/4/

Answer 1

Try this:

$('ul').on('click','.maincat',
           function(e){
               // prevents the default click action of the a element
               e.preventDefault();

               // finds the sibling elements, and shows them if hidden,
               // hides them if visible
               $(this).siblings().toggle();

               // finds the closest ul ancestor of the clicked element
               // finds the other ul siblings of that ancestor-ul
               // finds the '.maincat' class element's siblings that are visible
               // hides those visible elements
              $(this)
                 .closest('ul')
                 .siblings('ul')
                 .find('.maincat')
                 .siblings('li:visible')
                 .hide();
           });

JS Fiddle demo.

---

Edited to add references (below) and this note:

Please be aware that, as of jQuery 1.7, the live() method is deprecated (and, as such, support may, or more likely will be dropped). For jQuery 1.7+ use the on() method (see the references, below) and prior to 1.7 the delegate() method is recommended in preference.

My reference for this note is the API documentation for live(), see references.

Please note

References:

• closest().
• delegate().
• e.preventDefault().
• find().
• hide().
• live().
• on().
• siblings().
• toggle().