CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
Ed R
Ed R

Reputation: 2179

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 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.

Upvotes: 2

Views: 10880

Answers (3)

Hussein
Hussein

Reputation: 42808

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

Make sure you hide .content by default. 

.content{
 display:none;
}

check working example

Upvotes: 7

Jess
Jess

Reputation: 8700

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

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

Upvotes: 0

Khez
Khez

Reputation: 10350

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 ?

Upvotes: 2

Related Questions