Question

http://jsfiddle.net/umbriel/CvhkM/1080/

In this fiddle I have managed to code so that when I hover on the red trigger the div expands accordingly. However I want multiple triggers that would expand their linked divs. But since I’m new with jQuery I cannot figure out a efficient way of doing that. Any help is appreciated!

To add some context I want to add these expanding divs over a photo with employees so that if you hover over the trigger by their name the div will expand by their head showing extra information about that person. Sort of like annotations on the image.

Answer 1

Try something like this:

$('.trigger').hover(function() {
    $(this).next('.employee').delay(200).animate({
        height: '200px'
    }, 500);
},function() {
    $(this).next('.employee').dequeue().animate({
        height: '20px'
    }, 500);
});

This snippet uses .next() to get the next .employee sibling of the .trigger.

Fiddle: http://jsfiddle.net/CvhkM/1081/