CODEWITHSUNDEEP
javascriptjquery
Keith Power
Keith Power

Reputation: 14141

jQuery show list items

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/

Upvotes: 0

Views: 238

Answers (2)

mccow002
mccow002

Reputation: 6914

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();

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - http://jsfiddle.net/En7KV/10/

$('a.show_list').on('click', function(e){
    e.preventDefault();
    $(this).parent().siblings().toggle();
    $(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});

Upvotes: 1

Related Questions