Full height accordion in Twitter’s Bootstrap 3.3.4

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);
});Code language: JavaScript (javascript)

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;
}Code language: CSS (css)

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>Code language: HTML, XML (xml)
Tags