jumbo - ¿Cómo se logra que Twitter Bootstrap Accordion mantenga abierto un grupo?
list bootstrap style (6)
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");
})
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 .
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.
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 etiquetas adecuadas en los enlaces del panel inactivo
aria-expanded="false"
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();
}
});
Según la versión de bootstarp 3.3.6, solo sigue la estructura
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
collopse 1 body here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
collapse body 2
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
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
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
( Nota: la clase de panel es necesaria en Bootstrap 3 para que funcione el acordeón )