Accordion effect on picture

I want to apply an accordion effect with jQuery on a picture.

I use this syntax...

// jQuery
$(document).ready(function() 
{
$("dt.tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
  }
  )
  .next().hide();
}
);
  // Html
  <dt class="tooltip">Mail <img src="../pictures/help.png" title="" alt="" /></dt>
  <dd><!-- Text --></dd>

On hover, dd content displays. Everything is ok!

But I want to apply accordion effect only with hover picture. I tried with...

$(document).ready(function() 
{
$(".tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
  }
  )
  .next().hide();
}
);
  // Html
  <dt">Mail <span class="tooltip"><img src="../pictures/help.png" title="" alt="" /></span></dt>
  <dd><!-- Text --></dd>

But it doesn't wor开发者_C百科k!

Any help would be greatly appreciated.

Thanks à lot.

Vincent

Set your image to display:none; and add the line

 $('dt.tooltip img').toggleClass("active").toggle();

so your final code looks like this

$(document).ready(function()
{
$("dt.tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
      $('dt.tooltip img').toggleClass("active").toggle();
  }
  )
  .next().hide();
}
);

Check working example at http://jsfiddle.net/fLtF3/