How to implement bootstrap accordion in table in MVC?

Question

I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first @Html.Raw(item.D) and @Html.Raw(item.B).

What i want is that, if i click on 2nd row then its respective @Html.Raw(item.D) and @Html.Raw(item.B) should displayed and so on.

Please suggest me where I am going wrong.

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

programtreasures · Accepted Answer · 2018-05-23 04:56:07Z

You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,

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

updated : data-target="#12345-cores@(item.id) & id="12345-cores@(item.id)"

still showing the same issue. whichever row i click, it is shows the first row respective data. Not working as expected.

Collectives™ on Stack Overflow

How to implement bootstrap accordion in table in MVC?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related