Щебетать саундтреком

Я беспокоился, чтобы добиться этого с помощью twitter bootstrap accordion:

Как правило, использование аккордеона (плагин для разворачивания бутстрапов) не обязательно.

Я хочу достичь:

использовать bootstrap в качестве базовой структуры,
имеет фиксированную навигационную панель,
имеют полную ширину/высоту содержимого без полос прокрутки,
имеют 3 отдельных, складных панели содержимого (при этом только один расширяется),
нажмите на часть заголовка, разверните область содержимого (и сверните ранее расширенную),
прокрутка происходит только в одной расширенной панели содержимого (DIV 1 | 2 | 3 на рис.),
когда панели содержимого сбрасываются, чтобы их переполнение было скрыто,
У каждой области содержимого есть настраиваемая минимальная высота (для своего "заголовка" ),
это правильно работает для гибких макетов.

Было бы очень приятно получить какую-то помощь в этом, поскольку я думаю, что я теряю рассудок по этому поводу: (

Использование дополнительных плагинов jQuery (например, пользовательский интерфейс jQuery) разрешено.

Ответ 1

HTML:

 <div class="ui-accordion" id="accordion">        
    <h4 class="ui-accordion-header">DIV1</h4>
    <div class="ui-accordion-content" id="accordion-div1"></div>
    <h4 class="ui-accordion-header">DIV2</h4>
    <div class="ui-accordion-content" id="accordion-div2"></div>
    <h4 class="ui-accordion-header">DIV3</h4>
    <div class="ui-accordion-content" id="accordion-div3"></div>
 </div>

CSS: (ничего особенного)

JS:

$("#accordion").accordion( {
  heightStyle : "fill"
});

Ответ 2

Я смог добиться этого с помощью JS:

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length;
var height = $('#your_accordion_container').innerHeight() - tabsHeight;

$('.accordion-inner').height(height - 1);

Я не понял, почему мне нужно делать - 1, но без него .accordion-inner был слишком большим.

Обязательно оберните это в функцию и вызовите его каждый раз, когда окно браузера будет изменено. Также убедитесь, что ваш .accordion-inner не имеет какого-либо вертикального заполнения или удаляет это дополнение с установленной высоты.

Ответ 3

У кого-нибудь есть решение Bootstrap 3?

Изменить (это работает): https://github.com/twbs/bootstrap/issues/2462

$('#accordion').collapse().height('auto');