title: JQuery: How do I hide a DIV when textbox is out of focus?
body: <p>This is the code I have:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;asp:TextBox ID="txtInsertComments" CssClass="expanding" runat="server" AutoPostBack="false" TextMode="MultiLine"&gt;&lt;/asp:TextBox&gt;
      &lt;/div&gt;
          &lt;div id="commands"&gt;
              &lt;table cellpadding="0" cellspacing="0" width="400px" id="tblCommands"&gt;
                  &lt;tr&gt;
                      &lt;td style="width: 50%; text-align: center;"&gt;
                          &lt;asp:LinkButton ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false"&gt;Insert&lt;/asp:LinkButton&gt;
                      &lt;/td&gt;
                      &lt;td style="width: 50%; text-align: center;"&gt;
                          &lt;asp:LinkButton ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false"&gt;Cancel&lt;/asp:LinkButton&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          $(function()
          {
              $("#commands").hide("normal");
  
              $("textarea[id$=txtInsertComments]").focus(function()
              {
                  $("#commands").show("normal");
              });
  
          });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>First, when this page is loading, the div #command is loaded very quick and then disappears. I need the div to remain hidden until the textbox txtInsertComments control is clicked or gets focus.</p>
  
  <p>Second, when the user click out of the textbox txtInsertComments or that the textbox lost focus, the div #command is still there and not hidden.</p>
  
  <p>Any help is appreciated.</p>