Bootstrap: contrae otras secciones cuando uno se expande

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

Actualmente tengo la siguiente vista:

enter image description here

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:

   

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 astackn uno encima del otro.

Entonces, mi objective 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.

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

 
keys
attrs
edit

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 .

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 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 se apega a la estructura HTML y los selectores adecuados de acuerdo con la convención Bootstrap, debería estar bien.

 
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.
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.
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.

MANIFESTACIÓN

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; } 
      
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.
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.
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.

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'); }); 

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

ACCIÓN:

  

JQUERY:

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

El método funciona correctamente para mí:

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

trabajando como un encanto aquí para bootstrap 4> 4.1.1

 var myGroup = $('your-list'); myGroup.on('show.bs.collapse','.collapse', function() { myGroup.find('.collapse.show').collapse('hide'); }); 
Intereting Posts