Bootstrap :Свернуть другие разделы при раскрытии одного из них

Я делаю приложение Rails и пытаюсь реализовать определенную функциональность, связанную с коллапсом Bootstrap Twitter . Потерпите меня, пока я объясняю это.

В настоящее время у меня есть следующее представление:

Когда каждая из этих кнопок нажата, их данные -toggle div расширяются. Вид настраивается -следующим образом:

     Keys <%= @app.keys.count %>
     Attributes
     Edit Details

    

        
    

    

        
    

    

        
    

Я настроил их -вот так, потому что мне нужны кнопки рядом, в ряд. Если я перемещаю кнопки прямо над видом, они расширяются/сворачиваются, тогда кнопки складываются друг над другом.

Итак, моя конечная цель состоит в том, чтобы расположить три кнопки по сторонам -и -и заставить их сворачиваться и расширяться в соответствующих разделах. Текущая настройка -работает, но немного неудобна. Например, если кто-то развернет раздел ключей, а затем развернет раздел атрибутов, ему придется прокрутить страницу ниже раздела ключей.

Есть два возможных решения этой проблемы. Во-первых, нажатие одной кнопки приводит к тому, что две другие схлопываются. Это означало бы, что в любой момент времени расширяется только один из этих разделов.

Я думаю, что лучшим решением было бы сделать так, чтобы при расширении ключей кнопки справа перемещались вниз в нижнюю часть div ключей, а когда атрибуты расширялись, кнопка редактирования сведений перемещалась в нижнюю часть этого div.. Это возможно? Я уже пытался сделать это, позволяя кнопкам располагаться друг над другом и меняя их относительное расположение с помощью css, но это не сработало, потому что, когда один из разделов был расширен, другие кнопки оказались в неудобных местах в середина развернутого раздела.

Наконец,Я хотел бы попытаться сделать это без поведения в стиле аккордеона, как указано на странице начальной загрузки в Твиттере, но если кто-то сможет убедить меня с точки зрения дизайна, что это предпочтительнее, я, безусловно, передумаю.