CODEWITHSUNDEEP
javascriptjquery
greedsin
greedsin

Reputation: 1272

slideToggle() not working correctly

I have an <li> in which are TWO <ul>.The second <ul> is hidden and should be shown when i click inside the first <ul>.

I've tried this : $(me).parent().parent().find("ul").slideToggle(); $(me) is an instance of this and the <li> Wrapper-Element.

The Problem is now that the hidden <ul> is shown but the visible <ul> hides. And it should not hide that.I want the hidden <ul> to show and hide right when i am clicking on the visible <ul>.

Another thing to mention is that i am using this code in an success function of an ajax call : 

success:function(data){
     $(me).parent().parent().find("ul").slideToggle();
}

Maybe someone can help me.I probaply just need to adjust the .find() but i dont know how to do it ....

Upvotes: 0

Views: 82

Answers (2)

Vaune
Vaune

Reputation: 314

You can use CSS child selectors in jQuery. The following fiddle demonstrates that if you click inside the first UL, the second will slide.

$('li ul:first-child li').click(function(){
    $(this).parent().parent().find("ul:nth-child(2)").slideToggle();
});

https://jsfiddle.net/mqjvt2nu/2/

There are a bunch of ways to do this. You can specify classes or id's and target that way. You can use the .siblings() function in jQuery. You could also use the .next() or .prev() functions.

Upvotes: 1

taxicala
taxicala

Reputation: 21789

Try using the .not method:

$(me).parent().parent().find("ul").not(':visible').slideToggle();

Upvotes: 0

Related Questions