title: I write this code sample code to hide 2 rows but it did not work
body: <p>I am trying to hide two rows, <code>&lt;tr&gt;&lt;td&gt;line 1&lt;/td&gt;&lt;/tr&gt;</code> and <code>&lt;tr&gt;&lt;td&gt;line 2&lt;/td&gt;&lt;/tr&gt;</code>, by wrapping them in a div with <code>display:none</code> set, but these rows are not hidden. Why?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function toggle() {
      var ele = document.getElementById("toggleText");
      var text = document.getElementById("displayText");
      if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show";
      } else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
      }
    } 
  &lt;/script&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;a id="displayText" href="javascript:toggle();"&gt;Show&lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;div id="toggleText" style="display: none;"&gt;
      &lt;tr&gt;&lt;td&gt;line 1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;line 2&lt;/td&gt;&lt;/tr&gt;
    &lt;/div&gt;
  &lt;/table&gt;
  </code></pre>