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

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

При нажатии на каждую из этих кнопок их 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>

У меня они настроены так, потому что я хочу, чтобы кнопки располагались рядом друг с другом. Если я перемещу кнопки, чтобы они были прямо над видом, который они раскрывают / сворачивают, то кнопки складываются друг над другом.

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

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

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

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