Question

I have two ul’s that when the top li is clicked it shows the others below and hides another opened in other ul’s.

My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.

I have put another a tag beside the main li’s but now I cant get the show feature too work. Not sure what might be wrong.

I am not a great at traversing the dom and I know I have the siblings worng.

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

Answer 1

EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.

Note that I’ve wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it’s a bit easier to read and interpret at a glance and has less room for confusion in the future.

I think I understand what you want. Take a look at this fiddle:

http://jsfiddle.net/CU9zg/3/

I’m assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.

$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();