El botón Acordeón Bootstrap alternar “datos padre” no funciona

Estoy intentando crear un acordeón usando Bootstrap 3 usando el botón plegable con el atributo de datos, sin el marcado de acordeón. Simplemente me parece más limpio.

Sin embargo, no puedo hacer que funcione el atributo de datos padre . Quiero abrir una pregunta, cerrar todas las demás. Estoy leyendo los documentos ( http://getbootstrap.com/javascript/#collapse-usage ) pero todavía no puedo hacer que funcione.

Estoy usando el siguiente código:

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Aquí está el JSFiddle: http://jsfiddle.net/twinsen/AEew4/

Estaré muy feliz si alguien me señala dónde estoy cometiendo un error: \

Bootstrap 4

Use el atributo data-parent="" en el elemento de colapso (en lugar del elemento desencadenante)

 
Collapsible #1 element
... (more cards/collapsibles inside #accordion parent)

Bootstrap 3

Vea este número en GitHub: https://github.com/twbs/bootstrap/issues/10966

Hay un “error” que hace que el acordeón dependa de la clase .panel cuando se utiliza el atributo de data-parent . Para solucionarlo, puede ajustar cada grupo de acordeón en un div ‘panel’.

http://bootply.com/88288

 
..
..
...

Editar

Como se menciona en los comentarios, cada sección no tiene que ser un .panel . Sin embargo…

  • .panel debe ser un elemento directo del elemento utilizado como data-parent=
  • cada sección de acordeón ( data-toggle= ) debe ser un hijo directo del .panel ( http://www.bootply.com/AbiRW7BdD6# )

Tenga en cuenta que no solo hay dependencia en .panel, también tiene dependencia en la estructura DOM.

Asegúrate de que tus elementos estén estructurados así:

  
Control
...

Básicamente es lo que dijo @Blazemonger, pero creo que la jerarquía del elemento objective también importa. No terminé de probar todas las posibilidades, pero básicamente debería funcionar si sigues esta jerarquía.

FYI, tuve más capas entre el control div y el contenido div y eso no funcionó.

Prueba esto. Solución simple sin dependencias

 $('[data-toggle="collapse"]').click(function() { $('.collapse.in').collapse('hide') }); 

Como dijo Blazemonger, #parent, .panel y .collapse tienen que ser descendientes directos. Sin embargo, si no puede cambiar su html, puede hacer una solución usando los eventos y métodos bootstrap con el siguiente código:

 $('#your-parent .collapse').on('show.bs.collapse', function (e) { var actives = $('#your-parent').find('.in, .collapsing'); actives.each( function (index, element) { $(element).collapse('hide'); }) }) 

Si encontré esta alteración a la respuesta de Krzysztof ayudó a mi problema

 $('#' + 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'); }) }) 

si tiene paneles nesteds, entonces también puede necesitar especificar cuáles agregando otro nombre de clase para distinguir entre ellos y agregarlo al selector a en el JavaScript anterior.

Tengo el mismo problema al alternar el acordeón. Pero cuando trato de poner el bloque de script en el bloque de encabezado, ¡funciona para mi caso!

  ...     

Aquí hay un (afortunadamente) parche universal que desarrollé para solucionar este problema para BootStrap V3. No hay requisitos especiales aparte de enchufar el script.

 $(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() { var parent = $(this).data('parent'); var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this); items.each(function() { var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1]; $(target).filter('.in').collapse('hide'); }); });