CODEWITHSUNDEEP
jquery
Pankaj
Pankaj

Reputation: 4503

Jquery- Hide div

I have a div inside form something like

<form>
<div>
showing some information here
</div>

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

</form>

i am population information inside div(idshow) on some button click event. what i want whenever i ill click outside div(idshow), it should be hide. just like i click on menu then menu is display and when i click outside menu it goes hide. I need everything using jquery

Upvotes: 14

Views: 57046

Answers (2)

Nick Craver
Nick Craver

Reputation: 630627

You can do what you want like this:

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

What happens here is when you click, the click event bubbles up all the way to document, if it gets there we hide the <div>. When you click inside that <div> though, you can stop the bubble from getting up to document by using event.stopPropagation()...so the .hide() doesn't fire, short and simple :)

Upvotes: 7

Tauren
Tauren

Reputation: 27243

$(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 );
  }
});

Upvotes: 22

Related Questions