title: How can I hide this setting-box on a click on the gear icon and anywhere outside of the body?
body: <blockquote>
  <blockquote>
  <p>this the CSS I use.</p>
  </blockquote>
  </blockquote>
  <pre><code>.setting-box 
  {
  position: fixed;
  left:-200px;
  top:0;
  width: 200px;
  z-index: 1000;
  min-height: 100vh; 
  }
  .toggle-setting 
  {
  position: absolute;
  right: -34px;
  top: 6em;
  background: #fff;
  border-radius: 0px 5px 5px 0;
  text-align: center;
  cursor: pointer; 
  }
  </code></pre>
  <blockquote>
  <p>I tried a lot of things but it doesn't work!</p>
  <blockquote>
  <p>that code works very well but.</p>
  <blockquote>
  <p>except when I click on the page the setting box doesn't close</p>
  </blockquote>
  </blockquote>
  </blockquote>
  <pre><code>$('.setting-box .toggle-setting').on('click',function () {
  $(this).parent('.setting-box').toggleClass('open');
  
  if ($(this).parent('.setting-box').hasClass('open')) {
  $(this).parent('.setting-box').animate({
          left:0,
          },1000);
  
       } else {
         $(this, 'body').parent('.setting-box').animate({
              left:'-200'
        },1000);
       }
  });
  </code></pre>