Tengo 3 acordeones Bootstrap de Twitter en mi página, cada uno configurado de esta manera:

<div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
             <h4 class="panel-title">Collapsible Group Item #1</h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse">
            <div class="panel-body">...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
             <h4 class="panel-title">Collapsible Group Item #2</h4>
        </div>
        <div id="collapseTwo1" class="panel-collapse collapse">
            <div class="panel-body">...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
             <h4 class="panel-title">Collapsible Group Item #3</h4>
        </div>
        <div id="collapseThree1" class="panel-collapse collapse">
            <div class="panel-body">...</div>
        </div>
    </div>
</div>

losidLos acordeones son como el que se muestra arriba, así que#accordion1, #accordion2 y#accordion3. Lo mismo cuenta para los paneles por acordeón.

¿Cómo puedo modificar esta configuración para que solo se pueda abrir un panel a la vez? Por el momento, un panelpor acordeón puede estar abierto a la vez, que no es mi comportamiento deseado.

MANIFESTACIÓN:JSFiddle