Hide div click on outside

Question

I want to hide the hidden class div. When user will click on the outside of the div hidden div should be slide-out.

HTML

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

CSS

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

JS

$(document).ready(function () {
    $('#slide').click(function () {
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
    });
});

Thanks in advance!

Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — angel.bonev, Nov 07 '19 at 13:14

Aksen P · Accepted Answer · 2019-11-07T15:55:49.980

You can you this code. And you can define which elements of your page could hide your panel. I choose left, right and clear classes here:

$(document).ready(function () {
    $('#slide').click(function () {
        hide_el ();
    });
    
    $('.left, .right, .clear').click(()=>{
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        }
    }); 
});

function hide_el (){
      var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
}

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

If you need body click then use this code:

$(document).ready(function () {
 
    
$('#slide').click(function () { 

 hide_el ();      
});

});  
 
function body_click(){
  setTimeout(()=>{
   var hidden = $('.hidden');
    $('body').click( function(event) {
      if( $(event.target).closest(hidden).length === 0 ) {
         if (hidden.hasClass('visible')) {
                hidden.animate({
                    "left": "-1000px"
                }, "slow").removeClass('visible');
        };
      }
    }); 
  }, 1000);   
}

function hide_el (){
 
      $('body').unbind('click');
  var hidden = $('.hidden');
    if (hidden.hasClass('visible')) {
        hidden.animate({
            "left": "-1000px"
        }, "slow").removeClass('visible');
    } else {
        hidden.animate({
            "left": "0px"
        }, "slow").addClass('visible'); 
    body_click();  

    }
}

body {
  height: 300px;
}
.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body> 
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

@KHansen, that's why I wrote that it's possible to choose. It was my decision to use these classes. — Aksen P, Nov 07 '19 at 13:45
@YogeshD, [we can](https://jsfiddle.net/fnym4vch/), but need additional efort for solving some bagg as you can see. `body` works as container for everything on the page. — Aksen P, Nov 07 '19 at 13:56
Thanks! What if i removed the left & right div? Will it work in that case? — Yogesh D., Nov 07 '19 at 15:29
@YogeshD., I missed say to you - you need to define the `height` of body, I forgot to fix css also, check it now. You see that I've tooked `body` with `height:300px;`. See the second snippet — Aksen P, Nov 07 '19 at 15:55

score 0 · Answer 2 · answered Nov 07 '19 at 13:33

The following code checks if you're clicking inside the target element of a descendent of that element. If not the desired code will run. I didn't add in the animation bits, that's all you. Here's the fiddle https://jsfiddle.net/jhe36dmb/1/

$(document).mouseup(function (e)
 {
    var container = $('.hidden');

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {

      $('.hidden').css('left', '0');
    }
});

Hide div click on outside

2 Answers2