Bootstrap : accordion-toggle doesn't work

Question

I have a problem with my accodion-toggle . I put it in my code but it doesn't work my title stay in blue and with nothing near of my title.

This is my code :

@{string module_origine = "";
 int step = 0;
}
<div class="accordion" id="accordion2">
@foreach (var test in Model)
{
    if (module_origine != test.module)
    {
        module_origine = test.module;
        step = step + 1;

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"   href="#collapse_@step">
                    @Html.DisplayFor(ModelItem => test.module)
                </a>
            </div>

            <div id="Collapse_@step" class="accordion-body collapse in">

                <div class="accordion-inner ">
                    @foreach (var item in Model.Where(item => item.module == module_origine))
                    {
                        <form method="get" action="/@Html.DisplayFor(modelItem =>item.droit)">
                            <button type="submit" class="btn btn-primary" title="@Html.DisplayFor(ModelItem => item.description)">@Html.DisplayFor(modelItem => item.menunom)</button>
                        </form>
                    }
                </div>
            </div>
        </div>
    }
}
</div>

I don't understand why my class accordion-toggle doesn't work so I hope I can understand why and help me think you !

Answer 1

to get a panel it's easy just change that :

    @{string module_origine = "";
 int step = 0;
}
**<div class="panel-group" id="accordion">** //add that to create panel
@foreach (var test in Model)
{
    if (module_origine != test.module)
    {
        module_origine = test.module;
        step = step + 1;

        <div class="panel panel-success ">
    <div class="panel-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"   href="#collapse_@step">
                    @Html.DisplayFor(ModelItem => test.module)
                </a>
            </div>

            <div id="Collapse_@step" class="accordion-body collapse in">

                <div class="accordion-inner ">
                    @foreach (var item in Model.Where(item => item.module == module_origine))
                    {
                        <form method="get" action="/@Html.DisplayFor(modelItem =>item.droit)">
                            <button type="submit" class="btn btn-primary" title="@Html.DisplayFor(ModelItem => item.description)">@Html.DisplayFor(modelItem => item.menunom)</button>
                        </form>
                    }
                </div>
            </div>
        </div>
    }
}
</div>

I just remove the accordion content it's not wooking on my thing