Edit: This has been answered below.

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.

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?

HTML

<table style=width:50%>

    <caption>Test Table</caption>

    <thead>

        <tr align=center>

            <th><span class=offscreen>State Icon</span></th>

            <th>Column 2</th>               

            <th>Column 3</th>               

            <th>Column 4</th>               

            <th>Column 5</th>

        </tr>

    </thead>

    <tbody>

        <tr align=center class=parentRow>

            <td><a href=# onclick=toggleRow();><img alt=Expand row height=20px; src=expand.png></a></td>

            <td>test cell</td>

            <td>test cell</td>

            <td>test cell</td>

            <td>test cell</td>

        </tr>

        <tr style=display: none; class=subRow>

            <td colspan=5><p>Lorem ipsum dolor sit amet...</p></td>

        </tr>

....

    </tbody>

</table>

CSS

.offscreen {

  position: absolute;

  left: -1000px;

  top: 0px;

  overflow:hidden;

  width:0;

}



.subRow {

    background-color: #CFCFCF; 

}

JavaScript

function toggleRow() {

    var rows = document.getElementsByClassName(parentRow).nextSibling;

    rows.style.display = rows.style.display == none ? table-row : none;

}