How to close a sidebar when clicking outside?

Question

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 comes up.

are you able to bind `on('blur'...)` on the sidebar element itself to do the hiding? — blurfus, Mar 07 '16 at 20:04

Korgrue · Answer 1 · 2016-03-07T20:15:37.260

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.
}
});

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

1

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
});

edited May 23 '17 at 12:23

Community

1
1

answered Mar 07 '16 at 20:05

jdabrowski

1,805
14
21

I believe that event.stopPropagation(); is going to prevent his click handlers from working on any links he has in that side panel the way you have written it - not just prevent it from closing if clicked. – Korgrue Mar 07 '16 at 20:14
The links will be fine, because they are "above" #sidebar, so they are handled earlier in the propagation tree. – jdabrowski Mar 07 '16 at 20:30

Kylie · Answer 3 · 2016-03-07T20:31:47.870

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();
     }

score -1 · Answer 4 · answered Mar 07 '16 at 20:05

-1

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

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

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

answered Mar 07 '16 at 20:05

Jack Guy

8,346
8
55
86

4

This will also toggle it open when the user clicks anywhere on the page. Most likely they wouldnt want that – Kylie Mar 07 '16 at 20:07

How to close a sidebar when clicking outside?

4 Answers4