twitter-bootstrap - dinamicas - layout bootstrap

Bootstrap: contrae otras secciones cuando uno se expande (8)

Con data-parent uso de data-parent , la primera solución es apegarse a la arquitectura de selector de ejemplo

<div id="myGroup"> <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button> <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button> <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button> <div class="accordion-group"> <div class="collapse indent" id="keys"> keys </div> <div class="collapse indent" id="attrs"> attrs </div> <div class="collapse" id="edit"> edit </div> </div> </div>

Demo (jsfiddle)

La segunda solución es vincularse a los eventos y ocultar los otros elementos contraíbles usted mismo.

var $myGroup = $(''#myGroup''); $myGroup.on(''show.bs.collapse'',''.collapse'', function() { $myGroup.find(''.collapse.in'').collapse(''hide''); });

Demo (jsfiddle)

PD: el efecto extraño en las demostraciones es causado por el conjunto de min-height para el ejemplo, solo ignóralo.

Editar: cambió el evento JS de show a show.bs.collapse como se especifica en la documentación de Bootstrap .

Estoy haciendo una aplicación de Rails, y estoy tratando de lograr una funcionalidad particular relacionada con el collapse Twitter Bootstrap. Ten paciencia conmigo mientras lo explico.

Actualmente tengo la siguiente vista:

Cuando se hace clic en cada uno de estos botones, se expande su div de alternar datos. La vista se configura de la siguiente manera:

<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button> <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button> <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button> <div class="collapse indent" id="keys">  </div> <div class="collapse indent" id="attrs">  </div> <div class="collapse" id="edit">  </div>

Los configuré así, porque quiero los botones uno al lado del otro, seguidos. Si muevo los botones para que estén justo encima de la vista que expanden / contraen, los botones se apilan uno encima del otro.

Entonces, mi objetivo final es tener los tres botones uno al lado del otro y hacer que colapsen y expandan sus respectivas secciones. La configuración actual funciona, sin embargo, es un poco incómoda. Por ejemplo, si alguien expande la sección de claves y luego expande la sección de atributos, tiene que desplazarse debajo de la sección de teclas.

Hay dos posibles soluciones a este problema. Una es que presionar un botón hace que los otros 2 se colapsen. Esto significa que en un momento dado, solo una de estas secciones se expande.

La mejor solución, creo que sería tenerla de modo que cuando las teclas se expandan, los botones a la derecha se muevan hacia abajo a la parte inferior de las teclas div, y cuando los atributos se expandan, el botón de editar detalles se mueva hacia la parte inferior de ese div . es posible? Ya he intentado hacerlo dejando que los botones se apilen uno encima del otro y cambiando sus ubicaciones relativas a través de css, pero eso no funcionó porque cuando una de las secciones se expandió, los otros botones terminaron en puntos incómodos en el medio de la sección expandida.

Por último, me gustaría intentar hacer esto sin el comportamiento de estilo de acordeón mencionado en la página de arranque de twitter, pero si alguien puede convencerme desde el punto de vista del diseño de que es preferible, ciertamente lo reconsideraría.

El método funciona correctamente para mí:

var lanopt = $(".language-option"); lanopt.on("show.bs.collapse",".collapse", function(){ lanopt.find(".collapse.in").collapse("hide"); });

En bootstrap 4 para cerrar todos los colapsos funciona así:

ACCIÓN:

<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>

JQUERY:

$(document).ready(function() { $("#CloseAll").on(''click'', function() { $(".collapse").removeClass("show"); }); });

Si está utilizando Bootstrap 4 y no desea cambiar su marcado:

var $myGroup = $(''#myGroup''); $myGroup.on(''show.bs.collapse'',''.collapse'', function() { $myGroup.find(''.collapse.show'').collapse(''hide''); });

Si no quiere cambiar su marcado, esta función hace el truco:

jQuery(''button'').click( function(e) { jQuery(''.collapse'').collapse(''hide''); });

Cada vez que se hace clic en un BOTÓN, todas las secciones se colapsan. Luego, bootstrap abre el que seleccionaste.

Si se apega a la estructura HTML y los selectores adecuados de acuerdo con la convención Bootstrap, debería estar bien.

<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div>

DEMO

Utilizar esta:

$(''.panel-defaul.ph'').on(''show.bs.collapse'', function () { $(this).children(''.panel-heading'').addClass(''panel-heading-collapsed''); $(''.panel-defaul.ph'').not(this).children(''.panel-collapse'').removeClass(''in''); });

Ejemplo de Bootstrap 3 con botones uno al lado del otro debajo del contenido

.panel-heading { display: inline-block; } .panel-group .panel+.panel { margin: 0; border: 0; } .panel { border: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: transparent !important; }

Ejemplo de Bootstrap 3 con botones uno al lado del otro sobre el contenido