Hide /toggle if clicked outside

Question

I am using this template over here ( http://startbootstrap.com/templates/simple-sidebar.html ) for my startup in bootstrap learning. I am finding it pretty good to learn. Howeve

Answer 1

Try this instead:

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

$("#page-content-wrapper").click(function(e) {
    e.preventDefault();
    if $("#wrapper").hasClass("active"){
      $("#wrapper").toggleClass("active");
    }
});

This will allow you to listen for the click on the menu-toggle button when the sidebar is hidden and listen for the click on the rest of the content when the sidebar is visible.

Answer 2

You're going to need to create an absolutely positioned div covering the content area you want to click to hide the sidebar you'll have to specify its width and height via CSS. It will also need its own click event. Think of it as kind of a huge button that covers the content that is on the left side. This example does not cover the case of hiding the div if you navigate to a different section.

$('#menu-toggle').click(function(e) {
 $('.covers-content').show();
});

$('.covers-content').onClick(function(e) {
 $('#wrapper').toggleClass("active");
 $('.covers-content').hide();
});

<div class="covers-content" style="display:none"></div>