jQuery: Hide element on click anywhere else apart of the element
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element">How to detect a click outside an element?</a>  </p>
</blockquote>



<p>I'm trying to achieve that a 'div' hides if user clicks anywhere except on the element. I've got following code doing toggle() if user clicks on a button. I want the button click to stay plus if the 'Details' element is visible, reacts to other parts of the screen.</p>

<pre><code>    $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
                            //change the button label to be 'Show'
            toggle_switch.html('Show Details');
          }else{
                            //change the button label to be 'Hide'
            toggle_switch.html('Hide Details');
          }
        });
    });
</code></pre>
