Colapso de Bootstrap con solo un elemento mostrado

Question

Estoy tratando de usar los componentes de colapso de Bootstrap.

Funciona bien pero me di cuenta de que a veces no cierra todos los otros elementos; Cuando hago clic en orden desde el primero hasta el tercero y vuelvo al primero, el tercero permanece abierto.

Mi marcado es el mismo que el código de ejemplo que proporciona Bootstrap, porque solo estoy probando por el momento.

<div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Collapsible Group Item #1 
      </a> 
      </div> 
      <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
      Part 1 
      </div> 
      </div> 
     </div> 

     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Collapsible Group Item #2 
      </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      Part 2 
      </div> 
      </div> 
     </div> 

     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
       Collapsible Group Item #3 
      </a> 
      </div> 
      <div id="collapseThree" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Part 3 
      </div> 
      </div> 
    </div> 

El código JavaScript es la siguiente:

$(".collapse").collapse("#accordion2"); 

Teniendo en cuenta que estoy pensando en utilizar estos componentes en un menú, con el fin de mostrar a un grupo abierto de acuerdo con un valor de la variable de PHP me acaba tiene que imprimir la clase en al divcollapseOne/collapseTwo y así sucesivamente?

Answer 1

No necesita la parte de Javascript, de hecho - eliminar it !! Es precisamente ese código el que causa el comportamiento extraño: accordion2 se inicializa dos veces dando como resultado un doble conjunto de "lógica". Tu problema es completamente reproducible usando javascript o no.

En general, con respecto a Twitter bootstrap, cuando puede colocar todos sus datos y funcionalidad de enlace en data attributes, como lo ha hecho aquí, nunca tendrá que hacer javascript. TB hace el trabajo automáticamente cuando la página se está cargando, buscando esos data attributes.

Considere javascript como una segunda opción, una forma alternativa, cuando no puede hacer lo que desea simplemente dirigiéndose al data attributes.

Answer 2

Si ha realizado su margen de beneficio de acuerdo a bootstrap collapse docs se puede lograr esto con el siguiente código de jQuery:

$(document).on('click', '.accordion-toggle', function(e) { 
    event.preventDefault(); 

    $('#accordion2').find('.accordion-body').collapse('hide'); 
    $(this).parent().next().collapse('show'); 
});