title: How to hide a drop-down menu if i click outside?
body: <p>I have this function in jquery that shows and hide options by toggling the class 'showing'.</p>
  
  <pre><code>    $('#button').click(function(){
         $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine");
      });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#dropDownMenu .option{
     height: 0px;
  }
  
  #dropDownMenu .option.showing{
     height: initial;
     padding: 25px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;button id="button"&gt;&lt;/button&gt;
          &lt;div id="dropDownMenu"&gt;
              &lt;div class="option"&gt;OP1&lt;/div&gt;
              &lt;div class="option"&gt;OP2&lt;/div&gt;
              &lt;div class="option"&gt;OP3&lt;/div&gt;
              &lt;div class="option"&gt;OP4&lt;/div&gt;
              &lt;div class="option"&gt;OP5&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>How do I hide the menu by clicking outside, any other place on the page?</p>