Сбой Bootstrap Accordion 3.3.7 внутри цикла foreach asp.net core 1.1 не работает должным образом

Question

Я реализовал Bootstrap (я использую v3.3.7) Accordion в моем проекте ASP.NET Core 1.1 в цикле foreach в моей модели:

@{int ij = 1;}
    @foreach (var item in Model)
{
    <div class="bs-example">
        <div class="panel-group" id="accordionY">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordionY" href="#collapse_@ij">@ij How do I activate my account?</a>
                    </h4>
                </div>
                <div id="collapse_@ij" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>The instructions to activate your account will be sent to your email once you have submitted the registration form. If you did not receive this email, your email service provider’s mailing software may be blocking it. You can try checking your junk / spam folder or contact us at <a href="#">help@samplestore.com</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
        ij++;
    }

Проблема в том, что теперьведет себя довольно странно.Когда я впервые отображаю свою страницу, все элементы свернуты.Если я нажимаю на первый элемент, он расширяется правильно.Если я нажимаю на второе, первое сворачивается, а второе расширяется.

Но если я сейчас нажму третье, второе не рухнет.То же самое происходит со всеми остальными.

Только первый элемент сворачивается (если он уже развернут), если щелкнуть другой элемент.Все остальные остаются развернутыми.

Есть идеи, как это решить?

Answer 1

Я нашел решение.Цикл foreach должен быть вложен в <div class="panel-group" id="accordionY"> следующим образом:

<div class="bs-example">
        <div class="panel-group" id="accordionY">
            @{int ij = 1;}
            @foreach (var item in Model)
            {
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordionY" href="#collapse_@ij">@ij How do I activate my account?</a>
                        </h4>
                    </div>
                    <div id="collapse_@ij" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>The instructions to activate your account will be sent to your email once you have submitted the registration form. If you did not receive this email, your email service provider’s mailing software may be blocking it. You can try checking your junk / spam folder or contact us at <a href="#">help@samplestore.com</a></p>
                        </div>
                    </div>
                </div>
                ij++;
             }
        </div>
    </div>

В этом случае поведение является ожидаемым.Когда я открываю свернутый элемент, ранее развернутый элемент сворачивается независимо от того, на каком элементе я щелкаю.

Answer 2

Вот проанализированный DOM. Как видите, идентификаторы уникальны.