Question

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