title: Jquery: how to make div disappear when click outside
body: <p>I tried Chinnu R's approach, but when I click anywhere outside the div, menu items not hiding, only when I click inside the div, menu items hide, I want the opposite, ie, click outside div, hide, click inside div, stay put.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
          $("button").click(function() {
              $('div#nomore').toggle();
          });
  
  
          $("body &gt; *").not("body &gt; button").click(function(e) {
              $('div#nomore').hide();
          });
      });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button&gt;MENU&lt;/button&gt;
  &lt;div id="nomore" style="display:none; background-color:yellow; width:300px;"&gt;
  &lt;br&gt;
  &lt;a href="www.yahoo.com"&gt;Yahoo&lt;/a&gt;&lt;br&gt;
  ITEM 2&lt;br&gt;
  ITEM 3&lt;br&gt;
  ITEM 4&lt;br&gt;
  ITEM 5&lt;br&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>