title: How do I hide or close the div box by click outside?
body: <p>This works fine. But now I want to add the functionality so that if the user clicks anywhere outside of the div, the div will go back to being hidden. One more question, can i use the same code IPade also... </p>
  
  <p><a href="http://jsfiddle.net/HNrCD/2/" rel="nofollow">http://jsfiddle.net/HNrCD/2/</a>  </p>
  
  <p>
      
      
          How do I hide or close the div box by click outside?
      </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;//&lt;![CDATA[
      $(document).ready(function () {
          $("#focus").click(function () {
              $('#hidden-item').toggleClass('focused');
  
          });
  
      });//]]&gt;  
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  #focus {float: left; background: #333; color: #fff; padding: 5px;}
  #wrap {
      width: 100%;    
      position: fixed;
  }
  
  #hidden-item {
    background: red; color: #fff;
    position: absolute;
    top: 50px;
    left: 100%;
    width: 100%;
    margin-left:15px;
  
  
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  
  #hidden-item.focused {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrap"&gt;
      &lt;p id="focus"&gt;Click to Show/Hide&lt;/p&gt;
  
      &lt;div id="hidden-item"&gt;
          Hidden div...
          &lt;br /&gt;
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
          Line2
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>