title: jquery toggle not working in chrome but working in IE and firefox
body: <p>Hi Guys
  I have a page where i m displaying text in a span and that span control toggles on click of a button, basically i m using jquery for this. Its working fine on IE and firefox but on chrome when i click on the close button(which is there in the span to toggle it) it does not work for the first time i click on it but works after first click.</p>
  
  <p>please advice, code is below</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="Assets/JS/jquery.js"&gt;&lt;/script&gt;
      &lt;script language="javascript"&gt;
          $.showmsg = function (msgEle, msgText, autoHide, isSuccess) {
              var tblMsg;
              var imgType;
              if (isSuccess) {
                  imgType = "&lt;img src='Assets/Images/icon_status_success_26x26.gif'/&gt;"
              } else {
                  imgType = "&lt;img src='Assets/Images/icon_status_fail_26x26.gif'/&gt;"
              }
  
              tblMsg = '&lt;div id="container" style="width: 400px;"&gt;&lt;b class="rtop"&gt;&lt;b class="r1"&gt;&lt;/b&gt;&lt;b class="r2"&gt;&lt;/b&gt;&lt;b class="r3"&gt;&lt;/b&gt;&lt;b class="r4"&gt;&lt;/b&gt;&lt;/b&gt;&lt;div class="contain"&gt;&lt;table width="100%" cellpadding="0" cellspacing="0" border="0" class=""&gt;&lt;tr&gt;&lt;td style="width:30px;" align="center" valign="middle"&gt;' + imgType + '&lt;/td&gt;&lt;td&gt;' + msgText + '&lt;/td&gt;&lt;td style="width:30px;" align="center" valign="middle"&gt;&lt;a href="javascript:void(0);"  onclick="$(\'#' + msgEle + '\').toggle(50);"&gt;&lt;img src="Assets/Images/hide-icon.gif" border="0" alt="Hide" title="Hide"/&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;b class="rbottom"&gt;&lt;b class="r4"&gt;&lt;/b&gt;&lt;b class="r3"&gt;&lt;/b&gt;&lt;b class="r2"&gt;&lt;/b&gt;&lt;b class="r1"&gt;&lt;/b&gt;&lt;/b&gt;&lt;/div&gt;';
              $("#" + msgEle).html(tblMsg);
              $("#" + msgEle).show();
              if (autoHide) {
                  setTimeout(function () { $('#' + msgEle).fadeOut('normal') }, 10000);
              }
          }
  
  
          function Delete1() {
              $.showmsg('spnMessage', "Deleted", false, true);
          }
  
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          .rtop, .rbottom
          {
              display: block;
          }
          .rtop *, .rbottom *
          {
              display: block;
              height: 1px;
              overflow: hidden;
          }
          .r1
          {
              margin: 0 5px;
              background: yellow;
          }
          .r2
          {
              margin: 0 3px;
              background: yellow;
          }
          .r3
          {
              margin: 0 2px;
              background: yellow;
          }
          .r4
          {
              margin: 0 1px;
              height: 2px;
              background: yellow;
          }
          .contain
          {
              background: yellow;
              text-align: left;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;asp:Button ID="btnDelete" runat="server" Text="Delete"  OnClientClick="Delete1(); return false;" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;span id="spnMessage" style="display: none;"&gt;&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>