Question

I’m still quite new to javascript and JQuery…How do I get this div to close by clicking outside the toggle area (I don’t want the user to have to use a close button)

the code looks like this:

 function toggleDiv(divId) {
 $("#"+divId).toggle();
 }

 function showonlyone(thechosenone) {
 $('.newnote').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
 }

and the html looks like this

<div class="note">

     <a id="myHeader1" href="javascript:showonlyone('newnote1');" >
          <img src="images/SN_NotesPage_14.png">
     </a>      

     <div class="newnote" id="newnote1">
          <a>
               <img src="images/SN_NotesPage_16.png">
          </a>
     </div>
</div>

thank you

Answer 1

What I usually do is adding a click event listener to the document body which closes the overlay. To prevent closing the overlay by clicking on it I add a second click event listener to the overlay which contains ev.stopPropagation();

So with jQuery it would look like:

$(document.body).bind('click.closeNote', function() {
    $('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
    ev.stopPropagation();
});

Another way is to add a transparent div (with a lower zIndex than the note) which covers the whole page. You could then add a click event listener to this div which closes the note.

Edit:
Please note, that the example above is not very performant as it executes a selector on every click. Just bind this event when a note is shown and unbind it when they get closed.