CODEWITHSUNDEEP
jquerytoggleslideup
jolen
jolen

Reputation: 191

Jquery toggle each div on hover

I have a couple of divs displayed in order and I want when the user rolls over each div show the content in a slide up animation. I have done the most part but I'm struggling to grasp how to make the animation happen when you roll over the right div. Currently when I rollover one div its showing all three of the animated content.

Any help would be great.

code is:

$(".collection-content").hover(function () {
  $(".collection-info").slideToggle("fast");
});

I know it has something to do with a foreach statement but I just can't get there.

thanks

Upvotes: 2

Views: 1670

Answers (3)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

Change this

$(".collection-content").hover(function () {
    $(".collection-info").slideToggle("fast");
});

To this

$(".collection-content").hover(function () {
    $(".collection-info", this).slideToggle("fast");
});

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Try this please:

if you are looking for children you could use .next possibly.

Flick me you html and we can help out more, :)

$(".collection-content").hover(function () {
  $(this).find(".collection-info").slideToggle("fast");
});

Upvotes: 0

keeehlan
keeehlan

Reputation: 8054

Change this

$(".collection-content").hover(function () {
    $(".collection-info").slideToggle("fast");
});

To this

$(".collection-content").hover(function () {
    $(this).find(".collection-info").slideToggle("fast");
});

Upvotes: 4

Related Questions