Expanding/Collapsing Muiltiple HTML tables invdividually

[ntarsjc]

I'm attempting to display a master detail report on a webpage. The way it works now is that I am creating a table to create each master row and then under each master row is another table containing the details. Some of these tables are multiple rows. How would I go about making the detail rows expand/collapse? Here is my code for the detail row:\[code\]<table> <tr> <th> Bar Code &nbsp; </th> <th> Start Time </th> <th> Length &nbsp; </th> <th> End Time </th> </tr> <tbody id = '@ViewBag.i'> @foreach (var item in Model) { <tr> <td> @item.BarCode </td> <td> @item.StartTime </td> <td> @item.Length </td> <td> @item.EndTime </td> </tr> } </tbody></table>\[/code\]In this, the viewBag is being incremented each time the loop to generate this table in the other view is run. I've tried some code before but the closest I could get was an expand/collapse that only affected the first detail table. Thank you in advance.