Search code examples
jquerytoggleslideup

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

Solution

  • Change this

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

    To this

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