title: Hide/Show HTML inner table in button click using jquery
body: <p>I have tried hide and show html inner table using jquery. I want to hide the table when page loads then after click search button , table will show with values.</p>
  
  <p>But the below code is hidding intially, after click the search button, its blinking and hiding again.Please advise what is the wrong here.</p>
  
  <pre><code>$(document).ready(function() {
  
   $("#historylist").hide();
  
  $("#historysearch").click(function() {
   $("#historylist").show();
  });
  // }
  });    
  
  &lt;table id="searchTbl" width="800" &gt;
  &lt;tr&gt;
  &lt;td valign="top"&gt;Release No&lt;/td&gt;
  &lt;td valign="top"&gt;
  &lt;input type="text" name="releaseNo" value="" style="width:200" /&gt;
  &lt;/td&gt;
  &lt;td valign="top"&gt;&lt;input type="button" value="Search" onClick="commit()" style="width:80" id="historysearch"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;table border="1" cellpadding="2" cellspacing="0" id="historylist"&gt;
  &lt;tr&gt;
  &lt;th&gt;&lt;font size="-1"&gt;Header1&lt;/font&gt;&lt;/th&gt;
  &lt;th&gt;&lt;font size="-1"&gt;Header2&lt;/font&gt;&lt;/th&gt;
  &lt;th&gt;&lt;font size="-1"&gt;Header3&lt;/font&gt;&lt;/th&gt;
  &lt;th&gt;&lt;font size="-1"&gt;Header4&lt;/font&gt;&lt;/th&gt; 
  &lt;th&gt;&lt;font size="-1"&gt;Header5&lt;/font&gt;&lt;/th&gt;
  
  
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/table&gt;
  
  function commit(){
  
          document.menu.cmd.value='search';
          document.menu.submit();
      }
  </code></pre>