¿Cómo se logra que Twitter Bootstrap Accordion mantenga abierto un grupo?

Intento imitar la barra de Outlook utilizando Twitter bootstrap usando el plugin de acordeón y colapso, hasta ahora obtuve el colapso y el acordeón funcionando, pero actualmente permite que todas las secciones se colapsen.

Me gustaría limitarlo para que siempre se muestre uno y solo uno.

Aquí es en el que estoy trabajando: http://jsfiddle.net/trajano/SMT9D/ y creo que está en algún lugar a lo largo de las líneas de

$('#accordions').on('hide', function (event) { console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop"); }) 

Aquí hay una manera fácil de hacerlo:

Nueva Bootstrap 3

JsFiddle para Bootstrap 3.

Código para Bootstrap 3:

 $('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); }); 

El código verifica si el elemento cliqueado es el que se muestra actualmente (por la clase “in”) y si tiene la clase “in”, detiene el proceso de ocultación.


Bootstrap obsoleto 2

JsFiddle para Bootstrap 2.

Código para Bootstrap 2:

 $('.accordion-toggle').on('click',function(e){ if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); }); 

Nota: tenga cuidado si desea adjuntar más eventos de clic en el acordeón, ya que e.stopPropagation() bloqueará los eventos que se producirían después de la comprobación.

Quiero precisar la respuesta de @Hugo Dozois

http://jsfiddle.net/SMT9D/61/

Debería agregar e.preventDefault(); para evitar el comportamiento predeterminado de # HTML anclar si tiene un desplazamiento en su página

 $('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.preventDefault(); e.stopPropagation(); } }); 

O puede usar un simple truco de CSS de la siguiente manera:

 /* prevent the active panel from collapsing */ .panel-group [aria-expanded=true]{ /* http://caniuse.com/#feat=pointer-events Works for MOST modern browsers. (- Opera Mobile) */ pointer-events: none; } 

debe tener tags adecuadas en los enlaces del panel inactivo

  aria-expanded="false" 

Actualizado 2018

A continuación, le mostramos cómo mantener al menos abierto en Bootstrap v3 o v4. Esto significa que el acordeón abierto solo se puede cerrar al alternar otro abierto .

Bootstrap 4

https://www.codeply.com/go/bbCcnl0jBB

 // the current open accordion will not be able to close itself $('[data-toggle="collapse"]').on('click',function(e){ if ( $(this).parents('.accordion').find('.collapse.show') ){ var idx = $(this).index('[data-toggle="collapse"]'); if (idx == $('.collapse.show').index('.collapse')) { e.stopPropagation(); } } }); 

Además, vea esta respuesta que muestra cómo especificar un acordeón “predeterminado” que se abrirá cuando todos los demás estén cerrados.


Bootstrap 3

 $('[data-toggle="collapse"]').on('click',function(e){ if($(this).parents('.panel').find('.collapse').hasClass('in')){ var idx = $(this).index('[data-toggle="collapse"]'); var idxShown = $('.collapse.in').index('.accordion-body'); if (idx==idxShown) { e.stopPropagation(); } } }); 

https://www.codeply.com/go/yLw944BrgA

 
..
..
...

( Nota: la clase de panel es necesaria en Bootstrap 3 para que funcione el acordeón )

Bootstrap 4.0

 $('.card').click(function(e) { if ( $(this) .find('.collapse') .hasClass('show') ) { e.stopPropagation(); } }); 

Este bloque de código comprueba si la tarjeta cliqueada está contraída (mirando el div con el collapse clase). Cuando la tarjeta se show actualmente, deja de propagar el evento .

    Intereting Posts