Как реализовать начальную гармошку в таблице в MVC?

Question

Я хочу реализовать в моем приложении загрузочный аккордеон.В настоящее время, если я нажимаю на какие-либо строки, это дает мне сначала @Html.Raw(item.D) и @Html.Raw(item.B).

. Что я хочу, так это то, что если я нажимаю на 2-й строке, то соответствующие @Html.Raw(item.D) и @Html.Raw(item.B) должныи т. д.

Пожалуйста, подскажите, где я ошибаюсь.

<div class="panel-body">      
                <table class="table">

                    @foreach (var item in Model)
                    {

                        <tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
                            <td align="left">
                                @Html.Raw(item.H)
                            </td>                                                        
                            <td align="right">
                               @Html.Raw(item.E)
                              </td>
                                </tr>
                                <tr>
                                    <td class="accordion-body collapse" id="12345-cores">

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

                                               </tbody>
                                           </table>


                                    </td>
                                </tr>
                        }

                </table>

Answer 1

Вам необходимо однозначно указать идентификатор, для этого вам нужно добавить необработанный идентификатор (или что-то уникальное для каждой строки) к атрибутам id и data-target,

      <div class="panel-body">      
            <table class="table">

                @foreach (var item in Model)
                {

                    <tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores@(item.id)">
                        <td align="left">
                            @Html.Raw(item.H)
                        </td>                                                        
                        <td align="right">
                           @Html.Raw(item.E)
                          </td>
                            </tr>
                            <tr>
                                <td class="accordion-body collapse" id="12345-cores@(item.id)">

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

                                           </tbody>
                                       </table>


                                </td>
                            </tr>
                    }

            </table>

обновлено: data-target="#12345-cores@(item.id) & id="12345-cores@(item.id)"