Show div on mouseover over another div and close all other divs with same class

Question

Hi,

I have a list of divs (simplified example)

<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="description">text</div>

.description is hidden on page load when I hover over a title i show the description to that title, when I hover over another title I show the description to that title, but what I also want to do is to hide that last .description that was open.

I tried with mouseout, mouseleave etc. but didn't get it to work. Any suggestions?

    $('.title').mouseover(function () {
            $(this).next().fadeIn('fast');
        });

        $('.title')..mouseleave(function () {
            $(this).next().slideOut('fast');
        });

With this I hide the description if I hover over the same title again but not other titles.

    jQuery.fn.fadeToggle = function (speed, easing, callback) {
        return this.animate({ opacity: 'toggle' }, speed, easing, callback);
    };

    $('.title').mouseover(function () {
            $(this).next().fadeToggle('fast');
    });

Answer 1

You can specify their class selector to hide them all, in this way only one of them will be shown at a time:

   $('.title').mouseover(function () {
     $('.description').hide();
     $(this).next().fadeIn('fast');
   });

Answer 2

You've made a typo here:

$('.title')..mouseleave(function () {

There's two periods.

Hope it helps.

Answer 3

Your code works if you use the right function. There is no slideOut method. Use either fadeOut() or slideUp(), e.g.:

$('.title').mouseover(function () {
    $(this).next().fadeIn('fast');
});

$('.title').mouseleave(function () {
    $(this).next().fadeOut('fast');
});

See: http://jsfiddle.net/Tjcvz/