title: How to close a sidebar when clicking outside?
body: <p>I have a right sidebar appearing when this function its called</p>
  
  <pre><code>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');
          }
      });
  };
  </code></pre>
  
  <p>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?</p>
  
  <p>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.</p>