Question

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.

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. Is it possible to create a simple exception for links within the ‘body’ div?

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

My javascript is like so:

<script>
$(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');
        }
    });
};
</script>

Here is a demo: http://jsfiddle.net/esJsP/3/

Answer 1

Calling event.stopPropagation on click of link in body stops the event from reaching to body. Add below code and check the output:

$('.body > a').click(function(e) {
    e.stopPropagation();
});

Here is a demo: http://jsfiddle.net/esJsP/5/