jQuery slidetoggle multiple divs one at a time with same class

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 开发者_StackOverflow社区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.

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

Make sure you hide .content by default.

.content{
 display:none;
} 

check working example

You need to relate the container with the right content.

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

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

Here's an example on jsfiddle.

P.S. why are you returning false in slide ?

Heres another possiblity: http://jsfiddle.net/UfjMe/5/

Works by looping through each item, hiding, then adding the hover command.