MVC5 Bootstrap collapsible with dynamic class

Question

I am having my view bound to datatable as follows

 @{int i = 1;}
    @foreach (var item in Model.Rows)
    {
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading bg-info">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse@(i)">
                        <div class="col-lg-3">
                            <img style="width:50px" class="float-left p-l-5" src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" /> <div class="float-left p-l-10">
                                <h4 class="m-t-0">@item["First_Name"]</h4>
                                <p><b>#@item["Employee_Code"]</b></p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <h4 class="m-t-0">@item["Leave_Description"]: @item["No_Of_Days"] days - <span class="blue_heading">@item["Start_date"]</span></h4>
                            <h4 class="m-t-0">@item["Leave_Purpose"]</h4>
                        </div>
                        <div class="col-lg-4">
                        </div>
                    </a>
                </div>
                <div id="collapse@(i)" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="center_table">
                            <div class="border_table">
                                <table class="table table-hover table-expandable table-striped">
                                    <tr>
                                        <td>
                                            Leave Type: @item["Leave_Description"]
                                        </td>
                                        <td>
                                            Days : @item["No_Of_Days"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            From : @item["Start_Date"]
                                        </td>
                                        <td>
                                            To : @item["End_Date"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">Reason : @item["Leave_Purpose"]</td>
                                    </tr>

                                </table>
                            </div>
                            <div class="clearfix"></div>
                            <div class="well text-center p-10"><button type="button" class="btn btn-default">Accept Grant</button> <button type="button" class="btn btn-default">Reject</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        i++;
    }

I am getting the required output but when clicking on first row the second row is also showing as collapsed. My scenario is when there are multiple rows on clicking a particular row other rows collapse should be hidden.

Can someone tell what change do I need to achieve the scenario?

Answer 1

Can you try

i=i+1;

Sometime foreach confuses with ++ operator

Also you can try collapse-@i instead of #collapse@(i)