Why when I declare more than 1 separate BootStrap accordion (panel-group element) in a page I obtain this wrong behavior related to the open\collapse?

Question

I am pretty new in Twitter BootStrap and I am finding some difficult to obtain a specific behavior into a JSP page.

I try to explain what I have to do:

Into a JSP page I have to iterate on a List that contains some object and for each object of this list I have to create a single accordion (using the BootStrap panel-group element).

In this way I obtain n opened accordion (where n is the number of the objects into my list).

This is the code:

<section>
    <div class="container alignLeft">
        <c:forEach items="${listaScuoleDS}" var="scuola">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" href='<c:out value="${scuola.id.codScuUt}"/>'>
                          Collapsible Group Item #1
                        </a>
                    </h4>
                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>

        </div>
        </c:forEach>
    </div>
</section>

This is a JSFiddle in which I have putted the output rendered into the browser:

https://jsfiddle.net/AndreaNobili/hkbLphqm/1/

As you can see running the code into the JSFiddle the problem is that when I click on the header of the second accordion the first one is collapsed and it is wrong because have to be collapsed the second accordion.

I think that the problem is related to something like id of some tag because clicking on the header of the second accordion it interact with the first one. I tried to change the id but it seems can't work.

What am I missing? How can modify the JSFiddle code (then I will change it into the JSP iteration by myself) and obtain the desired behavior?

Answer 1

You have multiple elements with the same id . id attributes must be unique.

An option would be to number them.

For the first accordion:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<!-- -->
<div class="panel-heading" role="tab" id="headingOne1">
<!-- -->
<div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

For the second accordion:

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<!-- -->
<div class="panel-heading" role="tab" id="headingOne2">
<!-- -->
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

Etc.

To get these indexes to work in your jsp, use varStatus :

<c:forEach items="${listaScuoleDS}" var="scuola" varStatus="item">
    <div class="panel-group" id="accordion_${item.index}" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne_${item.index}">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" href="#collapseOne_${item.index}"/>'>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>

            <div id="collapseOne_${item.index}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</c:forEach>