title: closing the sidenav by clicking enywhere outside the sidenav
body: <p>I want to Close the sidenav by clicking anywhere outside sidenav
  my html code is</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- show image while loading --&gt;
  &lt;div class="se-pre-con"&gt;&lt;/div&gt;
  &lt;!-- Header starts here --&gt;
  &lt;div class = "header"&gt;
      &lt;!-- search bar --&gt;
      &lt;?php include("header.php");?&gt;
      &lt;!-- search bar ends here --&gt;
  &lt;/div&gt;
  &lt;!-- header ends here --&gt;
  
  &lt;div class="primary" id="primary"&gt;
      &lt;!-- image slider starts here --&gt;
      &lt;div class="image-slider"&gt;
          &lt;?php include("slider.php");?&gt;
      &lt;/div&gt;
      &lt;!-- image slider starts here --&gt;
  
      &lt;!-- all-content starts here --&gt;
      &lt;div class = "container wraper"&gt;
  
          &lt;!-- content starts here --&gt;
          &lt;div class="content"&gt;
              &lt;h3 class="Category"&gt;&lt;strong&gt; Category &lt;/strong&gt;
              &lt;button type="submit" class="btn btn-xs btn-success complete" id="more"&gt;&lt;strong&gt;More &lt;/strong&gt; &lt;span class="glyphicon glyphicon-forward"&gt;&lt;/button&gt;
              &lt;/h3&gt;&lt;hr id="index-hr"&gt;
              &lt;?php include("functions/index_category.php"); ?&gt;
          &lt;/div&gt;
          &lt;!-- content ends here --&gt;
  
      &lt;/div&gt;
      &lt;!-- all-content ends here--&gt;
  
          &lt;!-- daily adds starts here --&gt;
      &lt;div class="container news"&gt;
          &lt;h3 class="news"&gt;&lt;strong&gt; Daily News &lt;/strong&gt;&lt;/h3&gt;&lt;hr id="index-hr"&gt;
      &lt;/div&gt;
          &lt;!-- daily adds ends here --&gt;
  
      &lt;!-- side nav starts here --&gt;
      &lt;div id="mySidenav" class="sidenav"&gt;
          &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
          &lt;div id="result"&gt;
          &lt;?php include("functions/sub_category.php")?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- side nav ends here --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The Js i tried : </p>
  
  <pre><code>//close the side nav when clicked outside
   var primary = document.getElementById('primary');
   var sidenav = document.getElementById('mySidenav');
   window.onclick = function(event){
       if( event.target == primary ){
          sidenav.style.width = "0px";
          primary.style.marginLeft = "0px";
       }
   }
  </code></pre>
  
  <p>How ever it works  clicking enywhere on the side nav by replacing event.target == sidenav But i want to close it by clickng outside</p>
  
  <p>js for opening and closing the side nav are</p>
  
  <pre><code>function openNav() {
      if($(window).width() &gt; 600){
          $("#mySidenav").attr("style","width:350px");
          $(".primary").attr("style","margin-left:350px");
      }else{
          $("#mySidenav").attr("style","width:100%");
          $(".primary").attr("style","margin-left:100%");
      }
  
  }
  
  function closeNav() {
      $("#mySidenav").attr("style","width:0px");
      $(".primary").attr("style","margin-left:0px");
  }
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>.wraper{
      min-height: 165px;
      overflow: hidden;
      height: 200px;
  }
  .content {
      margin-top: 30px;
  }
  #more{
      width:6%;
      margin-right:0px;
      float:right;
  }
  .wraper.complete{
      height: auto;
  }
  h3.sub{
      color:#d34615;
      text-decoration:underline;
      padding-left: 10px;
  }
  #index-hr{
      width:100%;
      border-top:1px solid #333;
      opacity:0.3;
  }
  </code></pre>