CODEWITHSUNDEEP
jqueryhide
Ricardo Zea
Ricardo Zea

Reputation: 10283

Hiding an element when I click outside of it or somewhere else on the page

Ok, I have a list of radio buttons inside a DIV, this DIV slides down when I click on span.

Now, when I select one of the radio buttons, the text in the span is replaced and the DIV slides back up.

I also need to make the DIV with the list of radio buttons slide back up whenever the user clicks somewhere outside of it/any other place on the page.

Here's my jQuery:

$('input[type=radio]').click(function() {       
    $('.selected-search-wjs').text($(this).parent().text());//This replaces the text/selection
    $('.radio-btns-wrapper-wjs').slideUp('fast');//This makes the DIV slide back up after a selection has been made
});

Any idea how to that?

Thanks in advance.

PS. Let me know if you need the HTML. I didn't put it here because I don't think is necessary since this is a behavior feature regardless of how the HTML is put together. Thanks.

Upvotes: 3

Views: 3837

Answers (3)

lonesomeday
lonesomeday

Reputation: 237905

Try this:

var wrapper = $('.radio-btns-wrapper-wjs'); // cache the wrapper element for speed
$(document).click(function(e) { // when any click is received
    if (
        (wrapper[0] != e.target) && // the target element is not the wrapper
        (!wrapper.has(e.target).length) // and the wrapper does not contain the target element
    ) {
        wrapper.slideUp('fast');
    }
});

Upvotes: 3

Ricardo Zea
Ricardo Zea

Reputation: 10283

Here's the solution for this.

All I needed to do was to create another function using the .mouseleave method:

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

Now, I was using .mouseout but it didn't work because the container DIV had child elements in it, so once you hover over them the DIV would slide back up.

So I found this simple explanation about why and how to solve it:

http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

Thanks.

EDIT--

I ran into other issues with this case, see the problem and solution here: Hide element if displayed (a little complex case)

Upvotes: 0

user571545
user571545

Reputation:

Try jQuery's :not selecter, as in

$('body:not(.radio-btns-wrapper-wjs, input[type=radio])').click(function() {
    $('.radio-btns-wrapper-wjs').slideUp('fast');
});

Upvotes: 0

Related Questions