Show div on mouseover over another div and close all other divs with same class
<p>I have a list of divs (simplified example)</p>

<pre><code>&lt;div class="title"&gt;text&lt;/div&gt;
&lt;div class="description"&gt;text&lt;/div&gt;
&lt;div class="title"&gt;text&lt;/div&gt;
&lt;div class="description"&gt;text&lt;/div&gt;
&lt;div class="title"&gt;text&lt;/div&gt;
&lt;div class="description"&gt;text&lt;/div&gt;
</code></pre>

<p><code>.description</code>  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 <code>.description</code> that was open.</p>

<p>I tried with <code>mouseout</code>, <code>mouseleave</code> etc. but didn't get it to work. Any suggestions?</p>

<pre><code>    $('.title').mouseover(function () {
            $(this).next().fadeIn('fast');
        });

        $('.title')..mouseleave(function () {
            $(this).next().slideOut('fast');
        });
</code></pre>

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

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

    $('.title').mouseover(function () {
            $(this).next().fadeToggle('fast');
    });
</code></pre>
