Click anywhere outside of toggle div to close

Question

I've got a div sidebar with a toggle button which makes it slide out from the left. I've searched the web for a Jquery script that will allow me to close this sidebar from clicking anywhere on the webpage and can't find anything that will work for me.

Below is the existing jQuery i'm using:

$(document).ready(function(){
$('.toggle_sidebar').click(function(){
    $('#sidebar_extended').toggle("500");
});
    });

CSS:

#sidebar_extended{
width:180px;
position:absolute;
min-height: 100%;
height:100%;
left:0;
margin:0 10px 0 0;
padding:0;
background:#3a3b3c; 
display: none;
z-index: 5000;
color: #fff;
text-indent: 10px;}

HTML:

<div id="toggle">
  <a href="#sidebar_extended" class="toggle_sidebar">
    <img src="images/toggle.png" alt="toggle">
  </a>
</div>

<div id="sidebar_extended">
  Sidebar content
</div>

Try copying that code and using `body` as the selector instead of `.toggle_sidebar` — Luke, Oct 24 '14 at 08:39

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

For the hide part, try this :

$(document).mouseup(function (e){
  if (e.target.id != "sidebar_extended"){
    $('#sidebar_extended').toggle("500");
  }
}

For an even more powerful solution, please take a look at this : https://stackoverflow.com/a/7385673/644669

edited May 23 '17 at 12:16

Community

1
1

answered Oct 24 '14 at 08:42

Zakaria

14,892
22
84
125

The code from that link does work but it removes the toggle effect from the "toggle_sidebar" link. – user3189826 Oct 24 '14 at 08:49
The code above is intended to be integrated in your code. – Zakaria Oct 24 '14 at 09:22

Click anywhere outside of toggle div to close

1 Answers1