Hello,

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 < span > with the class "selected-search-wjs".

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

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

So far, so good.

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 < span > "selected-search-wjs" element but NOT if the user moves his mouse over the DIV "radio-btns-wrapper-wjs".

The thing is that is that if do this:

$('.selected-search-wjs').mouseleave(function() {
  $('.radio-btns-wrapper-wjs').slideUp();
});

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.

I need a condition that says something like:

"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 < span > "selected-search-wjs", but NOT if he moves his mouse over the DIV "radio-btns-wrapper-wjs"."

Does all this make sense?

Here's my HTML:

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

My jQuery:

//This slides up/down the DIV with the radio buttons
$('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select…').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();
});

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

Any help is greatly appreciated.

Here's a live example: http://jsfiddle.net/t2HkQ/3/

Thanks.