title: How to toggle (hide/show) a table onClick of <a> tag in Javascript
body: <p>I want to show and hide (toggle) the <code>&lt;table&gt;</code> <code>onClick</code> event of the <code>&lt;a&gt;</code>.
  this is my <code>&lt;a&gt;</code> tag</p>
  <pre><code>&lt;a id=&quot;loginLink&quot; onclick=&quot;toggleTable(true);&quot; href=&quot;#&quot;&gt;Login&lt;/a&gt;
  </code></pre>
  <p>Here is my Javascript function <code>toggleTable(hide)</code>:</p>
  <pre><code>   &lt;script&gt;
      function toggleTable(hide)
      {
      if (hide) {
         document.getElementById(&quot;loginTable&quot;).style.display=&quot;table&quot;;
         document.getElementById(&quot;loginLink&quot;).onclick = toggleTable(false);
     
      } else {
         document.getElementById(&quot;loginTable&quot;).style.display=&quot;none&quot;;
         document.getElementById(&quot;loginLink&quot;).onclick = toggleTable(true);
      }
     }
     &lt;/script&gt;
  </code></pre>
  <p>and here is my <code>&lt;table&gt;</code> tag:</p>
  <pre><code>&lt;table id=&quot;loginTable&quot; border=&quot;1&quot; align=&quot;center&quot; style=&quot;display:none&quot;&gt;
  </code></pre>
  <p>The first time when I click the <code>&lt;a&gt; link</code> it shows my table, but not hiding back when I click it next time. What am I doing wrong?</p>