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

Actualmente tengo la siguiente vista:

Cuando se hace clic en cada uno de estos botones, se amplía su división de conmutación de 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">
        <!--content-->
    </div>

    <div class="collapse indent" id="attrs">
        <!--content-->
    </div>

    <div class="collapse" id="edit">
        <!--content-->
    </div>

Los tengo configurados de esta manera, porque quiero los botones uno al lado del otro, en una fila. Si muevo los botones para que estén justo encima de la vista, ellos se expanden / contraen, entonces los botones se apilan uno encima del otro.

Por lo tanto, mi objetivo final es tener los tres botones uno al lado del otro y hacer que se colapsen y expandan sus respectivas secciones. La configuración actual funciona, sin embargo, es un poco incómodo. 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 claves.

Hay dos posibles soluciones a este problema. Una es que al presionar un botón, los otros 2 se colapsan. Esto significaría que, en un momento dado, solo una de estas secciones se expandirá.

La mejor solución, creo, sería tenerla de modo que cuando las claves se expandan, los botones de la derecha se mueven hacia abajo hasta la parte inferior de las div div. . es posible? Ya intenté hacerlo dejando que los botones se apilaran uno sobre el 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 lugares incómodos en el Centro de la sección expandida.

Por último, me gustaría intentar hacer esto sin el comportamiento de estilo acordeón que se menciona en la página de inicio de Twitter, pero si alguien me puede convencer desde un punto de vista de diseño de que es preferible, sin duda lo reconsideraré.