CODEWITHSUNDEEP
javascriptjquery
Non
Non

Reputation: 8589

How to close a sidebar when clicking outside?

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.

Upvotes: 3

Views: 13710

Answers (4)

Kylie
Kylie

Reputation: 11759

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

Upvotes: 1

Korgrue
Korgrue

Reputation: 3478

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

Upvotes: 2

Jack Guy
Jack Guy

Reputation: 8523

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

Upvotes: -1

jdabrowski
jdabrowski

Reputation: 1985

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

Upvotes: 1

Related Questions