twitter bootstrap - tutorial - Complemento de colapso de Twitter-bootstrap: ¿cómo habilitar la apertura de múltiples "grupos"?

bootstrap tutorial

Question

Estoy trabajando con el complemento de colapsar y me pregunto cómo puedo habilitar la apertura de múltiples grupos al mismo tiempo. En su página de demostración:

http://twitter.github.com/bootstrap/javascript.html#collapse

Solo uno puede estar abierto en un momento dado. Supongo que este es el comportamiento esperado de los acordeones, pero ¿cómo puedo cambiarlo para que al abrir un grupo no se colapsen los otros?

Answer 1

Para una solución que expande / contrae cada panel de manera dependiente y permite múltiples acordeones en cada página.

Si todos sus acordeones y grupos tienen identificadores únicos, entonces puede tener tantos acordeones en la página como desee

Cada acordeón necesita una identificación única:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

Cada encabezado necesita una identificación única

<div class="panel-heading" role="tab" id="headingOne">  

Cada cuerpo necesita una identificación única y, si corresponde, una referencia del título que se utilizará

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

Ejemplo en JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/

Answer 2

Simplemente no use atributos data-parent :

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

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

http://jsfiddle.net/HJf6j/2/

Answer 3

$(''#multipleOPened'').on(''click'', function() {
  if($(this).is('':checked'')) {
    $(''#accordion .collapse'').removeAttr(''data-parent'');
  } else {
    $(''#accordion .collapse'').attr(''data-parent'',''#accordion'');
  }
});

Un ejemplo con bootstrap 4 en JSFiddle: https://jsfiddle.net/tw1j7Lf3/7/