CODEWITHSUNDEEP
javascriptjqueryhtml
HD..
HD..

Reputation: 1476

clicking outside the div inside div should be close

i tried this code to open the inner div and close the div. but i have the problem when i click outside the div then it is not close. just i need help in it when i click outside the div then also inner div should be close.

here is the code:

<div class="userNameBox">prashant birajdar
    <div class="profile" style="display:none" tabindex="-1">
       here is the code.        
    </div>
</div>

here is js code

$( ".userNameBox" ).click(function() {
  $( ".profile" ).toggle( "slow" );
});

and here is jsfiddel http://jsfiddle.net/prashantbirajdar123/tY2vU/

Upvotes: 0

Views: 166

Answers (2)

brian
brian

Reputation: 812

Best solution in my opinion is to add an event on the body that will hide the profile on click, and in you userNameBox function stop the event propagation.

$( ".userNameBox" ).click(function(e) {
  e.stopPropagation();
  $( ".profile" ).toggle( "slow" );
});

$(document).click(function(e){
  $( ".profile" ).hide( "slow" );
});

Upvotes: 1

epascarello
epascarello

Reputation: 207511

Listen on the body and see where the click came from

$(document).click(function(evt) {
  if($(evt.target).closest(".userNameBox").length===0 && $(".profile").is(":visible")) {
      $(".profile").slideUp( "slow" );
  }
});

Upvotes: 2

Related Questions