The code below will help you make Twitter’s Boostrap accordion widget as high as the column it is inserted in. It has been tested in version 3.3.4.
The Javascript code:
$(document).ready(function () { 'use strict'; var bootstrapAccordionPanelFullHeight = function () { $('.accordion').each(function (i, obj) { var accordion = $(obj), // Get the main object parentHeight = accordion.parent().innerHeight(), // Get the height of the parent children = accordion.children('.panel.panel-default'), // Get the children of the parent headHeight = children.children('.panel-heading').first().outerHeight(), // Get the height of the panels' headers cnt = children.length, // Count the childrent freespace = parentHeight - cnt * headHeight; // Calculate the free space children.children('.panel-collapse').each(function (i2, obj2) { $(obj2).children('.panel-body').css('height', freespace + 'px'); // Alter the height }); }); }; // Call the sizer bootstrapAccordionPanelFullHeight(); // Bind the function to the window resize event $(window).resize(bootstrapAccordionPanelFullHeight); });
The CSS:
.accordion.panel-group { padding: 0px; margin: 0px; height: 100%; } .accordion .panel-heading { border-top: 1px solid #ccc; padding: 0; } .accordion .panel-heading a { display: block; padding: 15px; } .accordion .panel-body { box-shadow: none; } .accordion .panel { border: none; padding: 0px; margin: 0px !important; } .accordion .panel-heading a:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ content: "\e114"; /* adjust as needed, taken from bootstrap.css */ float: right; /* adjust as needed */ color: grey; /* adjust as needed */ } .accordion .panel-heading a.collapsed:after { /* symbol for "collapsed" panels */ content: "\e080"; /* adjust as needed, taken from bootstrap.css */ } .fullsize { width: 100% !important; height: 100% !important; margin: 0; padding: 0; } .fullheight { height: 100% !important; margin: 0; padding: 0; }
The HTML:
<div class="container-fluid fullsize"> <div class="row fullsize"> <div class="col-md-10 fullheight"> <p>This is a full height div.</p> </div> <div class="col-md-2 fullheight"> <div id="accordion" class="panel-group accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapse One</a></h4></div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <p>Collapse One Content</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">Collapse Two</a></h4></div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>Collapse Two Content</p> </div> </div> </div> </div> </div> </div> </div>