title: How to hide toggle (div) when clicking anywhere on the page
body: <p>I used <code>toggle</code> to Hide/Show <code>DIV</code></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrap"&gt;
  
    &lt;h1 id="selectBox"&gt;Service you&amp;#39;re interested in&lt;/h1&gt;
  
    &lt;div class="selectBox"&gt;
      &lt;div class="selectBoxWrap"&gt;
  
        &lt;ul class="selectBoxContent"&gt;
          &lt;li&gt;&lt;input type="checkbox" name="#" value="New Web Site" /&gt; &lt;span class="innerPageSelect"&gt;Website Design and Development&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="#" value="New Web Site" /&gt; &lt;span&gt;Website Maintenance&lt;/span&gt;&lt;/li&gt;
          &lt;li class="other"&gt;
            &lt;p&gt;
              &lt;label for="other"&gt;Other&lt;/label&gt;&lt;br /&gt;
          &lt;input type="text" name="other" value="" id="other" /&gt;
            &lt;/p&gt;
           &lt;/li&gt;
         &lt;/ul&gt; 
  
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$(function() {
  
              $('#selectBox').click(function() {
          $('.selectBoxContent').slideToggle('fast');
          return false;
  
      });
          });
  </code></pre>
  
  <p>i want, hide toggle div when clicking anywhere on the page after selecting services by checking the <code>checkbox</code> or input something in the <code>textbox</code>.</p>
  
  <p>this is my fiddle <a href="http://jsfiddle.net/jhunlio/TEyHC/2/" rel="nofollow">here</a></p>
  
  <p>your comment and suggestion is appreciated</p>
  
  <p>thank you in advance!!! </p>