Bootstrap Accordion 3.3.7 collapse within a foreach loop asp.net core 1.1 does not work properly

Question

I've implemented a Bootstrap (I use v3.3.7) Accordion in my ASP.NET Core 1.1 project within a foreach-loop in my model like that:

@{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++;
    }

The problem is now that it behaves quite strange. When I render the first time my page, all items are collapsed. If I click the first item, it expands correctly. If I click the second, the first collapses and the second expands.

But if I now click the third, the second does not collapse. The same happens with all the other ones.

Only the first element collapses (if already expanded) if a click another one. All the others remain expanded.

Any idea how to solve it?

Answer 1

I have found the solution. The foreach loop must be nested into the <div class="panel-group" id="accordionY"> like that:

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

In this case the behaviour is the expected one. When I open a collapsed item, the previously expanded one collaps, regardless which item I click.