Menu div slideup outside click

Question

<a class="btn">Click ME </a>

<div class="content">
    Content
</div>

$('.btn').click(function(){
    $('.content').slideToggle();
});

fiddle here

Working fine , but my question is Need slide Up div.content when we click outside .btn button

Thanks

Answer 1

Try this , More usable and simple code, I think

$('.btn').click(function(){
    $('.content').delay(100).slideDown( function(){
});

});
$('html').click(function(){
  if( $('.content').is(':visible') ) {
     $('.content').slideUp();
  }
});

Demo

Answer 2

$('.btn').click(function(e){
     $('.content').slideToggle();
     e.stopPropagation();
});

$(document).click(function(){
     $('.content').slideUp();
})

Working Fiddle

Answer 3

Use below code:

$("body").click
(
  function(e)
  {   
    if(e.target.className !== "btn")
    {
      $('.content').slideToggle();
    }
  }
);

http://jsfiddle.net/zFUUq/5/

Answer 4

Try

$('.btn').click(function(){
    $('.content').slideToggle();
    return false;
});

$(document).click(function(e){
    if(!$(e.target).closest('.content').length){
        $('.content').slideUp();
    }
})

Demo: Fiddle

Answer 5

What this does is looks for all clicks.

If the click is not on content, and not on btn, it will slide up the menu.

 $(document).click(function(e){
    if (!$(e.target).hasClass('content') &&  !$(e.target).hasClass('btn') ) {
         $('.content').slideUp();
    }
});

Answer 6

Working DEMO

Try this

$('.btn').click(function (event) {
    $('.content').slideToggle();
    event.stopPropagation();
});
$(document).click(function() {
   $('.content').slideUp();
});