Jquery toggle each div on hover

Question

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

Answer 1

Change this

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

To this

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

Answer 2

Change this

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

To this

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

Answer 3

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");
});