Hide element if displayed (a little complex case)
<p>I have a list of radio buttons that are inside a DIV called "radio-btns-wrapper-wjs", this DIV slides down/up when you click on a 'trigger' element, in my case a &lt; span > with the class "selected-search-wjs".</p>

<p>The DIV "radio-btns-wrapper-wjs" slides back up when the user selects one of the radio buttons.</p>

<p>This DIV also slides back up when the user does not take any action (does not select a radio button) but <strong>has already moved his mouse over</strong> "radio-btns-wrapper-wjs" DIV and then moves it out.</p>

<p>So far, so good.</p>

<p>What I need is to have the same DIV, "radio-btns-wrapper-wjs", slide back up when the user moves his mouse out from the &lt; span > "selected-search-wjs" element <strong>but NOT if the user moves his mouse over the DIV "radio-btns-wrapper-wjs"</strong>. </p>

<p>The thing is that is that if do this:</p>

<pre><code>$('.selected-search-wjs').mouseleave(function() {
  $('.radio-btns-wrapper-wjs').slideUp();
});
</code></pre>

<p>The DIV with the radio buttons, "radio-btns-wrapper-wjs", slides back up as soon as I leave that DIV to select a radio button.</p>

<p>I need a condition that says something like: </p>

<p><em>"Hide the DIV "radio-btns-wrapper-wjs" if the user hovers over you and then hovers out. Also, hide this same DIV if the user moves his mouse away from the &lt; span > "selected-search-wjs", but NOT if he moves his mouse over the DIV "radio-btns-wrapper-wjs"."</em></p>

<p>Does all this make sense?</p>

<p>Here's my HTML:</p>

<pre><code>&lt;div class="radio-btns-wjs"&gt;&lt;span class="selected-search-wjs"&gt;&amp;nbsp;&lt;/span&gt;
  &lt;div class="radio-btns-wrapper-wjs"&gt;
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="all" id="all"&gt;
      All&lt;/label&gt;        
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="ln" id="ln"&gt;
      Option 1&lt;/label&gt;
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="prodsandserv" id="prodsandserv"&gt;
      Option 2&lt;/label&gt;
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="publications" id="publications"&gt;
      Option 3&lt;/label&gt;
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="comm" id="comm"&gt;
      Option 4&lt;/label&gt;
    &lt;label&gt;
      &lt;input type="radio" name="rb" value="lweb" id="lweb"&gt;
      Option 5&lt;/label&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My jQuery:</p>

<pre><code>//This slides up/down the DIV with the radio buttons
$('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select&amp;hellip;').click(function() {
    $('.radio-btns-wrapper-wjs').slideToggle('fast');       
}); 

//This hides the DIV with the radio buttons, if the user has hovered over it
$('.radio-btns-wrapper-wjs').mouseleave(function() {
    $(this).slideUp();
});
</code></pre>

<p>As you can see I'm very new to jQuery, but this is way over my head now.</p>

<p>Any help is greatly appreciated.</p>

<p>Here's a live example: <a href="http://jsfiddle.net/t2HkQ/3/" rel="nofollow">http://jsfiddle.net/t2HkQ/3/</a></p>

<p>Thanks.</p>
