如何在mvc中使用bootstrap手风琴展开和折叠表格行？

Question

我想使用bootstrap手风琴展开和折叠表格行。目前，如果我点击任何一行，它会展开并折叠。 但我想要的是，如果我点击第二行，那么第一行如果展开则应该折叠，依此类推。

<div class=" panel-body">
        <table class="table">
                @foreach (var item in Model)
                {
                    <tr>

                        <td class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(item.Id)">
                            <button class="bb" type="button">
                                @Html.Raw(item.H)
                           </button>
                        </td>
                        <td>
                            @Html.Raw(item.E)
                        </td>
                    </tr>

                    <tr>
                        <td id="AA_@(item.Id)" class="accordion-body collapse">
                            <table>
                                <tr>
                                    <td>
                                        @Html.Raw(item.D)
                                    </td>

                                    <td>
                                        @Html.Raw(item.B)
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                }

            </table>         

    </div>