3

Tengo una serie de acordeones anidados de Bootstrap y al tener que poner algunas etiquetas (span) entre la estructura de paneles, la descendencia no funciona y el cierre/apertura de los mismos falla.

He probado con este script pero no lo consigo. ¿Alguna sugerencia?

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})    
9
  • Hola Aldanux. muchas gracias por tu rápida respuesta. En realidad lo que es el evento si que lo hace, el problema es que cuando doy a abrir alguno de los acordeones hijos se me cierra el padre.
    – andres
    Commented el 16 ene. 2017 a las 12:13
  • En el pasado me encontré con un problema similar para una web de trabajo. La causa es el código de Bootstrap en sí que no está diseñado para tener acordeones dentro de acordeones. Deja que mire a ver si encuentro la solución que hice y te lo pongo por aquí
    – Alvaro Montoro
    Commented el 16 ene. 2017 a las 12:14
  • ok muchas gracias. Estoy utilizando '[id^=acordeon]' como selector del parent, ya que mi estructura está como #acordeon-padre y dentro de cada uno #acordeon-nivel-1, #acordeon-nivel-2, etc.., para cada hijo
    – andres
    Commented el 16 ene. 2017 a las 12:18
  • Estaba mirando el código y parece que el problema que había en versiones anteriores ya no está. Consigo poner varios acordeones anidados que funcionan sin problemas y sin necesidad de ningún JS adicional. ¿Podrías crear un ejemplo mínimo verificable y agregarlo a la pregunta?
    – Alvaro Montoro
    Commented el 16 ene. 2017 a las 12:25
  • Muchas gracias Alvaro, lo tengo en un entorno de pruebas con todo variables, literales, en fin, complicado replicarlo.
    – andres
    Commented el 16 ene. 2017 a las 12:30

1 respuesta 1

2

En el pasado me encontré con un problema similar para una web de trabajo. La causa es el código de Bootstrap en sí que no está diseñado para tener acordeones dentro de acordeones. Deja que mire a ver si encuentro la solución que hice y te lo pongo por aquí. Parece que el problema que había en versiones anteriores ya no está. Consigo poner varios acordeones anidados que funcionan sin problemas y sin necesidad de ningún JS adicional.

Es cuestión de asegurarse de que los IDs y los atributos data-* son correctos, puede que se te haya escapado alguno y por eso falle. Y específicamente debes prestar atención para que:

  • los acordeones internos tengan ID propio y no sea el mismo que el ID de ningún otro acordeón.
  • los encabezados de los paneles del acordeón tengan ID propio y no sea el mismo que el ID de otro encabezado.
  • los paneles que se colapsan tengan ID propio y no sea el mismo que el ID de otro panel.
  • el data-parent del enlace en el encabezado de un acordeón es el ID del acordeón que los contiene directamente.
  • el ID del panel que se colapsa coincide con el valor del href del enlace del encabezado asociado a ese panel.

Los tres primeros puntos son esenciales, no sólo para el funcionamiento del acordeón en sí, sino también porque el HTML válido no permite varios elementos con el mismo ID.

Aquí te dejo un ejemplo funcionando sin incidencias y sin necesidad de añadir JavaScript para controlar cuando se abre/cierra un sub-acordeón:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        <div class="panel-group" id="sub-accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="subHeadingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
                  Collapsible Sub-Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseSubOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="subHeadingOne">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="subHeadingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubTwo" aria-expanded="false" aria-controls="collapseSubTwo">
                  Collapsible Sub-Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseSubTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSubTwo">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>
      </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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

1
  • Muchas gracias Alvaro. Voy a probar con la version 3.3.7 y repasar bien todo lo que comentas a ver si se me ha pasado algo.
    – andres
    Commented el 16 ene. 2017 a las 12:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.