Hide div when clicking outside it?

JavaScript
1

If i have this:

$('.search').click(function(){
	$('.search-result').toggle();
});

It will only close if i click .search again. I want to make it so that it closes if the user clicks either search or anywhere outside the .search-result div, can anyone help me with this?

2

Could you make a fiddle?

3

Glad you are here to help Titus!=)

I made a simple fiddle http://jsfiddle.net/ExfMF/2/ , and what I want to do is:

If i open a div with the on click function, I want to toggle back or hide() it if i click anywhere outside it or clicking any other button. Is this possible?

4

Sorry, I don’t get it.

So far, you have two buttons and two divs.
Button one toggles the visibility of div one and button two toggles the visibility of div two.

What should happen after that?

5

if i click b1 to show bshow1 and then i want to close it. ATM I can only close it by clicking the b1 button again. But I want to be able to close it by clicking outside bshow1 aswell.

6

Ah, ok.
Then attach a click handler to the document object:

$(document).on("click", function(){
  $('.bshow1').hide();
});
7

Sorry for beeing a noob but should i wrap everything in this document object? Would you mind editing the fiddle?

I tried editing the fiddle but cant get it to work=)

8

I can’t fork the fiddle, as I am not at my PC, but change your jS to this:

$(document).on('click', function(e){
    if(e.target.nodeName === "BUTTON"){
       $(e.target).next().toggle();
    } else {
        
       $('.bshow1, .bshow2').hide();
    }
});