Simple jquery to ignore show/hide div when user clicks a link
<p>I have two divs. Clicking on the first toggles the second with jquery show when ever a user clicks anywhere on the div 'body' div.</p>

<p>My problem is this, when a user clicks on a link in the 'body' div, the show executes before the link loads. It creates confusion for users who think they missed something on the last page. <strong>Is it possible to create a simple exception for links within the 'body' div?</strong></p>

<pre><code>&lt;div&gt;
      &lt;div class="body"&gt;
         &lt;p&gt;Some really good links&lt;/p&gt;
         o Example Org: &lt;a href="http://example.org"&gt;example.org&lt;/a&gt;&lt;br&gt;
         o Example Dotcom: &lt;a href="http://example.com"&gt;example.com&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="toggle" style="display: none;"&gt;
         &lt;p&gt;Some really detailed information here.&lt;/p&gt;
      &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My javascript is like so:</p>

<pre><code>&lt;script&gt;
$(document).ready(function () {
  bindToggle;
});

function bindToggle() {
    $(".toggle").hide();
    $(".body").click(function(event) {
        el = $(this).next();
        if (el.is(":visible")) {
            el.hide('fast');
        } else {
            el.show('fast');
        }
    });
};
&lt;/script&gt;
</code></pre>

<p>Here is a demo: <a href="http://jsfiddle.net/esJsP/3/" rel="nofollow">http://jsfiddle.net/esJsP/3/</a></p>
