how to close sidebar by click inside body

Question

hey i have an offcanva sidebar wich works pretty good. What i would to change is, that the users should close the sidebar by cklicking wherever they whant. For example inside the body.

At the moment is there a close button inside the sidebar which brings it back to default.

function openNav() {
    document.getElementById("left-sidebar").style.width = "250px";
}

function closeNav() {
    document.getElementById("left-sidebar").style.width = "0";
}

opens sidebar

<a href="#"  onclick="openNav()"><i class="icon-menu"></i></a>

close sidebar

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"></a>

Possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Germano Plebani, Sep 29 '16 at 14:40
See the following question for a very similar query. The answers should help here: http://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside — The Gav Lad, Sep 29 '16 at 14:41

score 2 · Accepted Answer · answered Sep 29 '16 at 15:16

You could do it this way

// Toogle Left Sidebar

$('#open-pulse-sidebar').click(function() {
  $('.pulse-sidebar').toggleClass('active')
})

$(document).click(function(e) {
  var sidebar = $(".pulse-sidebar, #open-pulse-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

html:

<a href="#" id="open-pulse-sidebar"><i class="icon-menu circle-icon"></i></a>

and the width could you do via css.

Fore example:

width: 19.24em;

how to close sidebar by click inside body

1 Answers1