Question

Im having trouble with my jquery slide.

$(document).ready(function() 
{
  $(".events").hover(function() 
  {
      $(this).next().slideToggle(400);
  }, function() {
      $(this).next().slideToggle(400);
  });
});

When i hover over my image, the hiden content slides out and when im not hovered it slides in, thats great but i need to minipulate it so that the hidden content will stay open when i hover over the content and not just the image.
can anyone help me, im new to web desighn and have been stuck on this for some time.
Thanks in advance.

I spoke too fast, i tryied the solution above and its not working. My slide wont even open and its stoped all the other slides on my page from opening when i only changed one of them not sure what the problem is. this is my html:

info text goes here

–

Hi thebiffboff i copied my html and css to the fiddle link u sent and used the solution you showed me and it worked perfectly but it wont in my own page, how could i go about looking for the problem

Answer 1

You could wrap your image and hidden content in a wrapper, then bind your hover event to this wrapper. I have created an example fiddle for you. I have also added the .stop() method which clears the current animation queue, otherwise if you hovered in and out a number of times quickly, the slide would keep sliding up and down after you’d finished.