Bootstrap collapse with in a foreach loop

Question

I am having trouble getting the collapsible panels to work within my foreach loop. When an item is clicked, all of the items expand/retract, which isn't what I want. I want each element to be independent.

I am connected to a database and basically want to display the data simply and be able to expand to see more information.

I've tried lots of different solutions, my current method is based off https://stackoverflow.com/a/18568997/1366033 What should I do about the id and href?

Any help would be greatly appreciated.

@foreach (var item in Model)
            {
                <tr class="grid-row" id="accordion">
                    <td class="grid-cell" data-name="Name">@item.Name</td>
                    <td class="grid-cell" data-name="TodayDate">@item.TodayDate.Value.ToString("dd/MM/yyyy")</td>
                    <td class="grid-cell" data-name="Count">@item.Count</td>
                    <td class="grid-cell" data-name="TotalCount">@item.TotalCount</td>
                    <td>
                        <div class="accordion">
                            @{int i = 0;}
                            <div class="heading" id="heading_@i">
                                <h4 class="title">
                                    <a class="collapsed" role="button" data-toggle="collapse" href="#collapse_@i" aria-expanded="true" data-parent="#accordion" aria-controls="collapse_@i">
                                        <i id="aElement" data-id="@item.Id" class="chevron fa fa-fw"></i>
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="grid-row">
                    <td class="grid-cell" data-name="">
                        <div id="collapse_@i" class="collapse" aria-labelledby="heading_@i" data-parent="#accordion">
                            @{i++;}
                            <div>
                                <div id="divprogress"></div>
                                <div id="chartdiv" style="width: 800px; height: auto; position:relative;"></div>
                            </div>

                        </div>
                    </td>
                </tr>
            }

score 0 · Answer 1 · answered Mar 27 '20 at 09:20

0

Do not use the same data-parent attribute for every children tag :), for example:

<div data-parent="#id1"></div>
<div data-parent="#id2"></div>
<div data-parent="#id3"></div>

answered Mar 27 '20 at 09:20

Phong

26
3

Thank you for answering my question. I removed the data-parent feature, but unfortunately the result has not changed. – Mar 27 '20 at 09:24

Bootstrap collapse with in a foreach loop

1 Answers1