[解決済み] Bootstrap。1つのセクションを展開すると他のセクションが折りたたまれる

質問

Railsアプリを作っているのですが、TwitterのBootstrapに関連する特定の機能を実現しようとしています。 崩壊 . 説明するので我慢してください。

現在、以下のようなビューを持っています。

これらのボタンがクリックされると、それぞれの data-toggle div が展開されます。ビューは以下のように設定されています。

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

ボタンを横一列に並べたいので、このように設定しています。ボタンを拡大/縮小するビューの真上に移動させると、ボタンが重なってしまいます。

したがって、私の最終目標は、3 つのボタンを横に並べ、それぞれのセクションを折りたたんだり展開したりすることです。現在のセットアップは機能しますが、少し厄介です。たとえば、誰かがキー セクションを展開し、次に属性セクションを展開すると、キー セクションの下にスクロールする必要があります。

この問題には 2 つの解決策があります。1 つは、1 つのボタンを押すと、他の 2 つのボタンが自動的に折りたたまれるようにすることです。これは、いつでも、これらのセクションのうちの 1 つだけが展開されていることを意味します。

より良い解決策は、key が展開されると、右側のボタンが keys div の下部に移動し、attributes が展開されると、edit details ボタンがその div の下部に移動するようにすることだと思います。これは可能でしょうか？私はすでに、ボタンを互いの上に積み重ね、cssを通じて相対的な位置を変更することによってそれをしようとしましたが、セクションの1つが展開されたときに、他のボタンが展開されたセクションの真ん中にある厄介な場所で終わったので、それはうまくいきませんでした。

最後に、私は twitter のブートストラップページで言及されているように、アコーディオンスタイルの動作なしでこれをやってみたいと思っていますが、もし誰かがデザインの観点からそれが望ましいと私を説得できるなら、私は確かに考え直したいと思います。

どのように解決するのですか？

使用方法 data-parent を使用する場合、最初の解決策は例のセレクタアーキテクチャに固執することです。

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

デモ(jsfiddle)

2番目の解決策は、イベントにバインドして、他の折りたたみ要素を自分で隠すことです。

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

デモ(jsfiddle)

追記: デモの中で奇妙な効果があるのは min-height に設定されたもので、これは無視してください。

編集：JSイベントを show から show.bs.collapse で指定されているように ブートストラップ・ドキュメント .