Question

I have a bunch of items with the same class that when selected open a tooltip and dropdown menu. It works with a single item, but in order to get each one to work with it’s specific child, I’ve used .children(). It seems to work in some places but not in others. I’ve narrowed down what’s not working, but have zero idea as to why… please help.

HTML:

<div class="topIcon">

<a href="stream.html"><img src="icons/stream16lg.png" /></a>
<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Stream</div>
</div>
<div class="topDrop">Hello</div>

</div>

jQuery:

$("div.topIconNew").click(function(){
 //working
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
 //working
$(this).children("div.topTip").show();  
 //not working
$(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast");
 //not working
$(this).children("div.topDrop").slideDown(240);
clicked = true;
});

I haven’t included the CSS because I’m not sure it’s really what the issue is here. I’m thinking it’s my jQuery, but I don’t know really. Any and all help is appreciated.

Answer 1

So I’m a little confused about the JavaScript you have. For example, div.topIconNew has no children, so Im not sure why your $(this).children("div.topTip").show(); should work? Maybe you want to use $(this).siblings("div.topTip").show();?

Heres the JavaScript that would work for you:

$("div.topIconNew").click(function(){
    $(this).parent("div.topIcon, div#topSend, div#topTool")
           .css("background-color","#555555");

    $(this).siblings("div.topTip")
           .show()
           .animate({width:320,marginLeft:-240},"fast");

    $(this).siblings("div.topDrop").slideDown(240);

    clicked = true;
});