showing multiple hidden rows in html table

I have a table with various text, onclick elements and images in it

I want to simulate a sub menu effect by onload hiding,say rows 2-5;7-10;12-15. That is showing rows 1;6;11.
then by clicking on a button at the end of row1 show rows 2-5;
similarly click on button end of row 6 to show 7-10; etc.
and also be able to close the expanded rows from button within their own rows.
Is this a good strategy?

my tables contain quite complex actions i.e. pass to mp3 and php download etc.
I found the script below as a simple start but i am stuck
how would the function apply to different row ids- would you use byClass instead?

<script type=”text/javascript”>

function displayRow(){
var row = document.getElementById(“captionRow”);
if (row.style.display == ”) row.style.display = ‘none’;
else row.style.display = ”;
}
</script>

<table width=”300″ border=”1″>
<tr id=”captionRow”><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<p><button onclick=”displayRow()” >Show / Hide</button></p>
</body>

Also in #JavaScript _↴