Как развернуть и свернуть строку таблицы с помощью загрузочного аккордеона в mvc?

Question

Я хочу развернуть и свернуть строку таблицы, используя начальный аккордеон.В настоящее время, если я нажму на любую строку, она развернется и свернется.Но я хочу, чтобы, если я щелкну по второму ряду, то первый ряд должен свернуться, если он развернется, и так далее.

<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>

Answer 1

Я исследовал свою проблему на SO и нашел одно решение, предоставленное @tmg на здесь .Большое спасибо @tmg.Я следовал тому же в моем сценарии, и он работал для меня.

 <div class="panel-body">
            <table class="table">
                    @foreach (var item in Model)
                    {
                        <tr class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(item.Id)">
                            <td>
                                <button class="bb" type="button">
                                    @Html.Raw(item.H)
                               </button>
                            </td>
                            <td>
                                @Html.Raw(item.E)
                            </td>
                        </tr>


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

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

        </div>

И добавил JQuery, чтобы свернуть и переключить строку таблицы

  $('.table .accordian-body').on('show.bs.collapse', function () {
               $(this).closest("table")
                   .find(".collapse.in")
                   .not(this)
                   .collapse('toggle')
           })

Добавлен стиль для hiddenRow

.hiddenRow {
        padding: 0 !important;
    }