Question

<div class="buttons">
<a  class="showSingle" target="1">Click 1</a>
<a  class="showSingle" target="2">Click 2</a>
<a  class="showSingle" target="3">Click 3</a>
<a  class="showSingle" target="4">Click 4</a>
</div>

<div id="div1" class="targetDiv">Results from click 1</div>
<div id="div2" class="targetDiv">Results from click 2</div>
<div id="div3" class="targetDiv">Results from click 3</div>
<div id="div4" class="targetDiv">Results from click 4</div>​

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        });
});

​

I’ve found a great deal of ways to do this but can’t seem to get it to work for the way I have it set up. I need the .targetDiv to hide when you click anywhere on the page other other than when you’re clicking .showSingle or inside the .targetDiv box.

http://jsfiddle.net/XwN2L/1063/

Answer 1

Update: I bound it to html instead of body to fix clicking outside of the content area.

Here is your function, it triggers whenever the body of the page is clicked:

jQuery('html').click(function(){
    if( !jQuery(event.target).hasClass('targetDiv') ){
        jQuery('.targetDiv').hide();
    }
});

​
Then, we will also need to add

e.stopPropagation();
e.preventDefault();

To your first function prevent double actions. (Also, don’t forget to add e to your function arguments)

Here is a fiddle for it: – http://jsfiddle.net/XwN2L/1065

Best of luck to you.