title: jquery how to hide-sidebar and remove class when clicked somewhere on the page
body: <p>ihave  a jquery code that works to show the offcanvas sidebar and also makes the page opacity lower by toggling the class acive main-wrapper class.
  this is the code</p>
  
  <pre><code>$(document).ready(function () {
      $('.nav-icon').on('click', function(){
         $('.offcanvas').toggleClass('is-open');
         $('.main-wrapper').toggleClass('active');
      }); // end of on click     
  }); // end of ready
  </code></pre>
  
  <p>what i want is how i could remove those two toggled classes when clicked any where on the page except .nav-icon class.
  and this is the html code.</p>
  
  <pre><code>&lt;div id="wrapper" class="main-wrapper"&gt;
      &lt;div class="off-canvas-wrapper"&gt;
          &lt;div id="offCanvasLeft" class="offcanvas" aria-hidden="true"&gt;
              &lt;ul class="nav menus flex-column"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active" href="#"&gt;artists&lt;/a&gt;
  
                  &lt;/li&gt;
  
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Link2&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Link3&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- off-canvas-wrapper --&gt;
  
  
      &lt;nav class="navbar"&gt;
  
          &lt;i class="fa fa-bars fa-2x nav-icon" aria-hidden="true"&gt;&lt;/i&gt;
  
      &lt;/nav&gt;
  
      &lt;div id="main-section" class="container"&gt;
  </code></pre>