I have a right sidebar appearing when this function its called

var toggleSidebar = function() {
    $('#sidebar .arrow-box').click(function() {
        if (s === 0) {
            s = 1;
            $('#sidebar').css('left', '0');
            $('#sidebar .arrow').removeClass('dir-two');
            $('#sidebar .arrow').addClass('dir-one');
            $('#content').css('padding-left', '0');
        } else {
            s = 0;
            $('#sidebar').css('left', '-300px');
            $('#sidebar .arrow').addClass('dir-two');
            $('#sidebar .arrow').removeClass('dir-one');
            $('#content').css('padding-left', '300px');
        }
    });
};

but as you see I can open and close that sidebar only when clicking on that specific element, what should I do in order to close it when I click outside?

And just in case: as per UX I am not able to use a dark background in the whole view when the sidebar es up.

I have a right sidebar appearing when this function its called

var toggleSidebar = function() {
    $('#sidebar .arrow-box').click(function() {
        if (s === 0) {
            s = 1;
            $('#sidebar').css('left', '0');
            $('#sidebar .arrow').removeClass('dir-two');
            $('#sidebar .arrow').addClass('dir-one');
            $('#content').css('padding-left', '0');
        } else {
            s = 0;
            $('#sidebar').css('left', '-300px');
            $('#sidebar .arrow').addClass('dir-two');
            $('#sidebar .arrow').removeClass('dir-one');
            $('#content').css('padding-left', '300px');
        }
    });
};

but as you see I can open and close that sidebar only when clicking on that specific element, what should I do in order to close it when I click outside?

And just in case: as per UX I am not able to use a dark background in the whole view when the sidebar es up.

• javascript
• jquery

• are you able to bind on('blur'...) on the sidebar element itself to do the hiding? – blurfus Commented Mar 7, 2016 at 20:04

4 Answers 4

Test the target of the click. If it does not match the target you want to close, then close it. All the other elements are children of the body - so clicking anywhere outside of the panel will retrieve a click target.

$sidebar = $('#sidebar');
$( "body" ).click(function( event ) {
  var a  = event.target;
  if(a === $sidebar){
//close the sidebar
//you may also want to test if it is actually open before calling the close function.
}
});

Take a look at this: How do I detect a click outside an element?

$('html').click(function() {
    //  Hide the sidebar
});

$('#sidebar').click(function(event){
    event.stopPropagation(); // prevents executing the above event
});

I would do it like this... (DEMO HERE)

sideBarOpen=false;     

function openSidebar(){
   sideBarOpen = true;
   $('#sidebar').css('margin-left', '0');
   $('#sidebar .arrow').removeClass('dir-two');
   $('#sidebar .arrow').addClass('dir-one');
   $('#content').css('padding-left', '0');
}

function closeSidebar(){
   sideBarOpen=false;
   $('#sidebar').css('margin-left', '-300px');
   $('#sidebar .arrow').addClass('dir-two');
   $('#sidebar .arrow').removeClass('dir-one');
   $('#content').css('padding-left', '300px');
}

$( document ).click(function( event ) {
   var target = $( event.target );
   if(sideBarOpen){
      closeSideBar();
   } else {
     if(target.is( '#sidebar' )){
      openSideBar();
     }
   }
});

This will close it if the user clicks anywhere, but open it, if the user clicks the sidebar

UPDATE

If you want to also be able to click on the stuff inside the sidebar Just give them a class, and add to the target.is check.

Example for links inside the bar

     <a href='#' class='menuLinks'>Test Link</a>

Then your click handler

    if(target.is( '#sidebar' ) || target.is('.menuLinks')){
      openSideBar();
    } else {
      if(sideBarOpen){
       closeSideBar();
     }

Just detect clicks on an element that enpasses the page. And prevent clicks on the sidebar from bubbling up to that element.

$("body").click(function () {
   toggleSidebar();
});

$("#sidebar").click(function (e) {
   e.stopPropagation();
});