title: Show/hide div on click using jQuery to create a "click menu"
body: <p>I'm new to jQuery and need some help to show and hide a div on click. Basically I need to show a div (containing a small menu) once the user click on a link, and as soon as the user click on a link inside the div just shown. Or clicks outside the div I need to hide the div again.my HTML looks something like this (I'll exist in many places on the page).</p>
  
  <pre><code>&lt;a class="menu" href="#"&gt;Menu&lt;/a&gt;
  &lt;div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;"&gt;
   &lt;div&gt;&lt;a href="#"&gt;Menu option 1&lt;/a&gt;&lt;/div&gt;
   &lt;div&gt;&lt;a href="#"&gt;Menu option 2&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also have a div that wraps the whole page that I thought I'd set another click-event on to hide the div (to catch clicks outside of the actual menu). </p>
  
  <p>Is this the right approach for solving this and how do I then remove the handlers on the wrapper div etc, etc. What else should I think of to get this right (if it it's the right approach that is)?</p>
  
  <p><strong><em>Update:</em></strong> Based on the accepted answer below I added this to solve it</p>
  
  <pre><code>//Need to return false here, otherwise the event will bubble up and trigger the hide on body
  $('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; });
  $('body, .menu-content a').click(function() { $('.menu-content').hide();});
  $('.menu-content a').click(function() { alert($(this)); });
  </code></pre>