javascript - jQuery slidetoggle multiple divs one at a time with same class - Stack Overflow

admin管理员组

文章数量:1278787

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.

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.

• javascript
• jquery
• html
• slidetoggle

Share Improve this question Follow asked Apr 11, 2011 at 1:11 Ed REd R 2,17966 gold badges2424 silver badges3232 bronze badges 1

• So, are you trying to have every div.content slide simultaneously, or are you just trying to bind a mon behavior to each div (where each div.content would slide independently when hovered over)? – Tieson T. Commented Apr 11, 2011 at 1:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

$(".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/UfjMe/5/

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

本文标签： javascriptjQuery slidetoggle multiple divs one at a time with same classStack Overflow