Estou fazendo um aplicativo Rails e estou tentando obter uma funcionalidade específica relacionada ao Bootstrap do Twittercolapso. Fique comigo enquanto eu explico.

Atualmente tenho a seguinte visão:

Quando cada um desses botões é clicado, sua div de troca de dados é expandida. A visualização é configurada da seguinte maneira:

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

Eu tenho eles montados assim, porque eu quero os botões lado a lado, seguidos. Se eu mover os botões para ficarem bem acima da exibição, eles se expandem / colapsam e, em seguida, os botões são empilhados um sobre o outro.

Então, meu objetivo final é ter os três botões lado-a-lado e fazer com que eles colapsem e expandam suas respectivas seções. A configuração atual funciona, no entanto, é um pouco estranha. Por exemplo, se alguém expandir a seção de chaves e, em seguida, expandir a seção de atributos, precisará rolar para baixo da seção de chaves.

Existem duas soluções possíveis para este problema. Uma é que pressionar um botão faz com que os outros 2 se colapsem. Isso significa que, a qualquer momento, apenas uma dessas seções é expandida.

A melhor solução, acho que seria tê-lo para que, quando as teclas forem expandidas, os botões à direita se movam para baixo até a parte inferior das teclas div e, quando os atributos forem expandidos, o botão editar detalhes seja movido para a parte inferior da div . Isso é possível? Eu já tentei fazer isso, deixando os botões empilharem uns sobre os outros e mudando suas localizações relativas através de CSS, mas isso não funcionou, porque quando uma das seções foi expandida, os outros botões acabaram em pontos difíceis no meio da seção expandida.

Por fim, gostaria de tentar fazer isso sem o comportamento do estilo acordeão, como mencionado na página de bootstrap do twitter, mas se alguém puder me convencer do ponto de vista do design que é preferível, eu certamente reconsideraria.