title: Hide and close a hidden div
body: <p>I have a hidden fixed div and want to display it if I click on a btn, and close if I click on any where else. Right now, I can hide the div if I click on a button or any where on the page. </p>
  
  <p>For the code below, I have achieve half of what I want. However, I want to the div still open (visible) if I click on any where in the green box. Can anyone suggest any idea to help me achieve that? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
   var OPEN = 0;   /* Offset to Open */
   var CLOSE = -10000;  /* Offset to Close */
  
   var t = 0;        /* Default time */
   var $obtn = $(".obtn-side");
   var $cbtn = $(".cbtn-side");
   var main = ".main-wrapper";
  
   $obtn.click(function(event) {
    event.preventDefault();
    var cid = $(this).attr("href"); /* Get the container id */
    navEffect(cid, OPEN, 0);
   });
  
  
   $cbtn.click(function(event) {
    event.preventDefault();
    var cid = $(this).attr("href");
  
    navEffect(cid, CLOSE, 0);
   });
  
   $(".side-wrapper").click(function(event) {
     navEffect("#side", CLOSE, 0);
  
   });
  
  });
  
  function navEffect(c, o, t) {
   var $con = $(c);
   $con.animate({
    right: o
   }, t);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.side-wrapper {
   position: fixed;
   top: 0px;
   width: 100%;
   height: 100%;
   background: black;
   right: -1100%;
  }
  
  .side-container {
   float: right;
   background: green;
   width: 50%;
   height: 100%;
   position: relative; 
   box-shadow: 0px 0px 5px 2px rgba(52, 73, 94, 0.9);
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="side" class="side-wrapper"&gt;
   &lt;div class="side-container"&gt;
    &lt;a class="cbtn-side" href="#side"&gt;x&lt;/a&gt;
          &lt;div&gt;
            &lt;h1&gt;Side bar&lt;/h1&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a class="obtn-side" href="#side"&gt;open&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>