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:
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.
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
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 )
$('.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 .