title: Show div on click on button, then hide this div when clicking outside of it
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="selectPeriodRangePanel"&gt;
      &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button id="period_select_range_btn"&gt;Select Range&lt;/button&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$("#period_select_range_btn").off().on("click", function(){
      $("#selectPeriodRangePanel").toggle();
  });
  </code></pre>
  
  <p>When i click on button, the <strong>selectPeriodRangePanel</strong> <code>DIV</code> is opened. I would like to hide this <code>DIV</code> when i click outside of it.</p>
  
  <p>How can i do that ?</p>