JQuery - Hide div

Question

I have a div inside the form something like

<form> <div> showing some information here </div> <div id="idshow" style="display:none"> information here </div> </form> 

I am the population information inside a div (idshow) on some button click event. what i want whenever i badly click on div (idshow), it should be hidden. just like I click on a menu, then the menu is displayed, and when I click on the external menu, it is hidden. I need everything using jquery

Answer 1

 $(document).click(function(event) { var target = $( event.target ); // Check to see if the target is the div. if (!target.is( "div#idshow" )) { $("div#idshow").hide(); // Prevent default event -- may not need this, try to see return( false ); } }); 

Answer 2

You can do what you want:

 $(document).click(function() { $("#idshow").hide(); }); $("#idshow").click(function(e) { e.stopPropagation(); }); 

What happens when you click, the click event bubbles up to the path to document , if it gets there, we hide the <div> . When you click inside this <div> , however, you can stop the bubble from switching to document with event.stopPropagation() ... therefore .hide() does not start, short and simple :)