Question

I’m trying to use slideToggle() on multiple div hover’s, showing another div in its respected container div. Example:

<div class="container">123
   <div class="content">ABC</div>
</div>
<div class="container">123
   <div class="content">ABC</div>
</div>

It runs on a dynamic page so the number of containers could range from 1-25. I am trying to slideToggle the "content" class of each div on the container hover. I use this jQuery

function slide() {
   $(".content").slideToggle("fast");
   return false;
}

$(".container").hover(slide, slide);

It will only work on the first container/content div however. How can I make it slidetoggle each created div without 25 different jQuery functions? Any help is appreciated, thank you.

Answer 1

$(".container").hover(function(){
$(this).find('.content').slideToggle();
});

Make sure you hide .content by default.

.content{
 display:none;
} 

check working example