在具有 Razor 语法的表元素中使用折叠项

我正在尝试使用手风琴隐藏/显示行。我验证了手风琴对此有效：

<div id="accordion">
   <h3>Some 1:</h3>
      <div><p>ABC</p></div>
   <h3>Some 2:</h3>
      <div><p>Muris</p></div>
</div>

但是当尝试将其用于我的应用程序时，它不起作用。以下是我想要完成的目标。我不确定这是否是某些标签的位置，只是手风琴在表元素中不起作用，或者剃刀语法是一个问题。

<table>
<tr>
    <th>Name</th>
    <td>@Html.Display("Name")</td>
</tr>
<tr>
    <th>Event</th>
    <th>Program</th>
</tr>
<div id="accordion">
 @for (var i = 0; i < @ViewBag.Events.Count; i++)
{
<tr>
    <td><h3>@ViewBag.Events[i].Event</h3></td>
    <td>@ViewBag.Events[i].Program</td>
</tr>
@Html.Raw("<div>")
<tr>
    <td>Value A</td>
    <td>Value B</td>
</tr>
for (var j = 0; j < @ViewBag.Events[i].Azc.Count; j++)
{
<tr>
    <td>@ViewBag.Events[i].Azc[j].ValueA</td>
    <td>@ViewBag.Events[i].Azc[j].ValueB</td>
</tr>
}
@Html.Raw("</div>")
}
</div>

所以基本上，我希望所有事件/程序都显示为行，单击其中一行后，将显示该事件的其余行。