Bootstrap коллапс с циклом foreach

Question

У меня проблемы с работой разборных панелей внутри моего лота oop. При щелчке по элементу все элементы расширяются / убираются, а это не то, что мне нужно. Я хочу, чтобы каждый элемент был независимым.

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

Я пробовал много различные решения, мой текущий метод основан на { ссылка } Что мне делать с id и href?

Любая помощь будет принята с благодарностью.

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

Answer 1

Не используйте один и тот же атрибут data-parent для каждого дочернего тега :), например:

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