Hide element if displayed (a little complex case)
- by Ricardo
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"> </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.
