jquery - troubleshooting this jquery code
<p>I am writing this routine where users can click on 3 buttons and the help divs will appear.</p>

<p>If the users click on any of the 3 buttons, the help divs will toggle and appear accordingly.  This appears to be done correctly with the code.</p>

<p>If the users click on the "close" button inside the help div, the help div will disappear.  This seems to be done correctly too.</p>

<p>If the users click outside of the help window (but not on the buttons), the window will also close.  This seems to be OK too. </p>

<p>But I am getting into a roadblock where I want the help window to stay open if the users click anywhere inside the help window except the close button.</p>

<p>My code is on jsfiddle here <a href="http://jsfiddle.net/nzMAw/2/" rel="nofollow">http://jsfiddle.net/nzMAw/2/</a>, I commented out the jquery line (near the end) that is giving me the problem.  It does not seem to get executed correctly when the script is run for the first time.  That is if I press any button for the first time, the help window will popup, but it will close if I click inside the window.  But after that, when I press the button again to open up the help window, the problematic code prevents the 'close' from closing the window. </p>

<p>I really appreciate any insight here.</p>

<p>TIA</p>

<pre><code>$(function(){

$(document).click(function(event){

    var id = event.target.id;
    //var id=$(this).attr('id');
    //alert (id);
if (id == 'close')
{
    $(".aa").fadeOut("slow");
}
else if (id == '1' || id == '2' || id == '3' )
{    $(".aa").filter('#'+id+"div").fadeToggle("slow").end().not('#'+id+"div").fadeOut("slow").end();     //2 ends for not and filter destructive methods.   
}

else
{
    //$(".aa").click(function(){ return false; });//this statement is the problem

    $(".aa").fadeOut("slow");    
}
});
      });
</code></pre>
