title: How to show/hide hidden HTML table rows using JavaScript (no jQuery)
body: <p><strong>Edit:</strong> This has been answered below.</p>
  
  <p>I would like to have an HTML table that has hidden rows between each row with more information about the top level rows. When clicking an expand/collapse image link in the first column, the hidden row's visibility will toggle from display:none; to display:table-row;. I have not written JavaScript in a while and need to be able to do this strictly in JavaScript and cannot use the jQuery toggle() method. </p>
  
  <p>How can I use JavaScript to find the sibling  with class="subRow" of the  with class="parentRow" that the button is located in within the table and then toggle the visibility of that sibling row?</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table style="width:50%"&gt;
      &lt;caption&gt;Test Table&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr align="center"&gt;
              &lt;th&gt;&lt;span class="offscreen"&gt;State Icon&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;Column 2&lt;/th&gt;               
              &lt;th&gt;Column 3&lt;/th&gt;               
              &lt;th&gt;Column 4&lt;/th&gt;               
              &lt;th&gt;Column 5&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr align="center" class="parentRow"&gt;
              &lt;td&gt;&lt;a href="#" onclick="toggleRow();"&gt;&lt;img alt="Expand row" height="20px;" src="expand.png"&gt;&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;test cell&lt;/td&gt;
              &lt;td&gt;test cell&lt;/td&gt;
              &lt;td&gt;test cell&lt;/td&gt;
              &lt;td&gt;test cell&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="display: none;" class="subRow"&gt;
              &lt;td colspan="5"&gt;&lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
  ....
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.offscreen {
    position: absolute;
    left: -1000px;
    top: 0px;
    overflow:hidden;
    width:0;
  }
  
  .subRow {
      background-color: #CFCFCF; 
  }
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>function toggleRow() {
      var rows = document.getElementsByClassName("parentRow").nextSibling;
      rows.style.display = rows.style.display == "none" ? "table-row" : "none";
  }
  </code></pre>