Twitter Bootstrap accordion full height panes

Question

I've been troubling myself to achieve this with twitter bootstrap accordion:

Generally, using the accordion (bootstraps collapse plugin) is not a must.

What I want to achieve is to:

• use bootstrap as base framework,
• have fixed-top navbar,
• have full width/height content w/o scrollbars,
• have 3 separate, collapsible content panes (with always only one being expanded),
• have clicking on header part expand the content pane (and collapsing the previously expanded one),
• have scrolling occur only in the one expanded content pane (DIV 1|2|3 in pic),
• when content panes are collapsed, to have their overflow hidden,
• have each content pane have its configurable min-height (for its "header"),
• have this properly working for responsive layouts.

Would really love to get some help on this as I think I'm loosing my mind over this :(

The use of additional jQuery plugins (like jQuery UI) is "allowed".

Answer 1

I was able to achieve this with some JS:

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

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

I haven't figured out why I need to do - 1 yet but without it the .accordion-inner was too big.

Make sure to wrap this in a function and to call it every time the browser window gets resized. Also make sure that your .accordion-inner doesn't have any vertical padding or to remove that padding from the set height.

Answer 2

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: (nothing special)

JS:

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