Bootstrap/Razor Second panel makes Collapse in the first

Question

What happens is that I have 2 topics in the database that are inserted automatically in the page and even here everything well, but starting with the panels closed or open if you click the second it always opens/closes the first...bootstrap and the like is not very my strong. Thank you

Answer 1

The second one is in the second cycle of foreach, what was happening to me was that I wasn’t incrementing the panel-Collapse id, so anyone who clicked to open it would always go to the first id.

I just added and incremented the variable 'i'.

    @{
        int i = 1;
        foreach (TopicoDb t in Model)
        {
        i++;
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color:#1B2B30;color:darkorange;">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1@(i)">@t.Titulo </a>
                        <span class="badge" style="text-align:right;">@t.Respostas.Count() </span>
                    </h4>

                </div>
                <div id="collapse1@(i)" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <!--TEXTO CAIXA COMMENTS e RESPOSTAS no PAINEL BODY-->
                        <p style="color:darkgray;font-size:10px;">Inserido por: @t.User.userName</p>
                        <br />
                        <p>@t.TextoDescritivo</p>
                        <hr />
                        @if (Session["UserLogged"] != null)
    {
        using (Html.BeginForm("Resposta", "Home"))
        {
            @Html.AntiForgeryToken()
                                @Html.Hidden("topicoId", t.Id)
                                @Html.Label("Responder:", new { style = "font-size:14px" })
                                <br />
                                @Html.TextArea("MsgResposta", "", 5, 140, new { })
                                <br />
                                <input type="submit" value="Enviar" />
                            }

                            <hr />
                            foreach (var resposta in t.Respostas)
        {
                                <p style="font-size:10px;">Respondido por: @resposta.User.userName</p>
                                <p>@resposta.MsgResposta</p>
                                <hr />
                            }

    }
                    </div>
                </div>
            </div>
        </div>
    }
}