title: Click outside and Hide Div
body: <p>I am trying to do the simple hide div when you click on the document.  I can't seem to get it to work. I basically want the div to toggle on when you click on a button.  And then if you click anywhere else (not on the div) it toggles off.  </p>
  
  <p>Here is the Script:</p>
  
  <pre><code>$(document).ready(function(){
  
      $(".slidingDiv").hide();
      $(".show_hide").show();
  
  $('.show_hide').click(function(){
      $('.slidingDiv').slideToggle();
      $(document).one(function(){
          $('.show_hide').show();
      });
  });
  });
  </code></pre>
  
  <p>Here is the CSS  (this is the correct CSS now with the correct JQuery Below!)</p>
  
  <pre><code>.slidingDiv {
  background-color: #FFF;
  border:3px solid #000;
  border-radius:0 0 15px 15px;
  float:right;
  height:175px;
  padding:20px;
  position:relative;
  top:-18px;
  width:300px;
  z-index:100;
  display:none;
  }
  
  .show_hide {
  
  }
  </code></pre>
  
  <p>And html:</p>
  
  <pre><code>&lt;div class="slidingDiv"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>Any help would be awesome.</p>
  
  <p>This is the whole thing I am now running including scripts:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function(){ //&lt;----shorter version of doc ready. this one can be used -&gt;jQuery(function($){ 
        $('.show_hide').click(function(e){ // &lt;----you missed the '.' here in your selector.
            e.stopPropagation();
            $('.slidingDiv').slideToggle();
        });
  
      $('.slidingDiv').click(function(e){
          e.stopPropagation();
      });
  
      $(document).click(function(){
         $('.slidingDiv').slideUp();
      });
  });
  &lt;/script&gt; 
  </code></pre>