<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h1 class="page-header">Collapsable Panel with Inline Summary</h1>
<p>Creates a panel with a summary alongside the panel title, when clicking the title the summary is hidden and panel body or list group is shown.</p>
</div>
<div class="row">
<h2>Default Summary Panel Collapsed</h2>
<div class="panel-group" role="tablist">
<div class="panel panel-compact in panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a href="#collapseListGroup1" class="" role="button" data-toggle="collapse" > Collapsible list group </a>
</h4>
</div>
<div class="panel-summary panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus neque non dapibus pulvinar. Nulla consequat congue mi nec fringilla. Proin non lorem lacinia, pellentesque metus molestie, commodo tellus. Morbi in vulputate ligula. Sed placerat sapien in egestas dapibus. Praesent sit amet elit leo. Mauris id ornare lacus. Sed ultricies ultrices enim in hendrerit. Pellentesque aliquet urna eu orci convallis tempus. Cras ac interdum felis. Sed mollis quis augue vel sodales. Nulla facilisis orci et finibus iaculis. Etiam elementum hendrerit sem, sed vehicula nibh auctor at. </p>
<p> Morbi dictum lobortis malesuada. Fusce consequat lobortis arcu at accumsan. Phasellus fringilla luctus nunc, ac ornare justo condimentum quis. Fusce mauris nibh, posuere consequat risus eu, ornare blandit mi. Morbi porttitor ex in ipsum tincidunt, ut cursus sem vulputate. In egestas, turpis eget ultricies finibus, libero odio pharetra quam, ullamcorper gravida turpis justo vel sem. Nullam venenatis eros ipsum, vel elementum leo tristique quis. Morbi pretium est et nulla mollis, nec sodales lorem pulvinar. Donec tempor mollis tincidunt. In pulvinar maximus nisl, a porttitor lacus consectetur vitae. Proin at blandit augue, ut mattis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pharetra lacus laoreet, aliquam augue eu, condimentum ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<h2>Default Summary Panel using List Group Collapsed</h2>
<div class="panel-group" role="tablist">
<div class="panel panel-compact in panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading2">
<h4 class="panel-title">
<a href="#collapseListGroup2" class="" role="button" data-toggle="collapse" > Collapsible list group </a>
</h4>
</div>
<div class="panel-summary panel-body">
<span class="label label-default">A</span>
<span class="label label-default">B</span>
<span class="label label-default">C</span>
</div>
<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup2">
<ul class="list-group">
<li class="list-group-item">Item A</li>
<li class="list-group-item">Item B</li>
<li class="list-group-item">Item C</li>
</ul>
</div>
</div>
</div>
</div>
</div>
.panel.panel-compact.in .panel-heading {
display: inline-block;
border-bottom: 0 none;
border-bottom-left-radius: 5px;
border-right: 1px solid #ddd;
border-top-right-radius: 0;
}
.panel.panel-compact .panel-body.panel-summary {
display: none;
}
.panel.panel-compact.in .panel-body.panel-summary {
display: inline-block;
padding: 0;
}
.panel.panel-compact .panel-collapse {
border-top: 1px solid #ddd;
}
.panel.panel-compact .panel-heading a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
margin-left: 10px;
}
.panel.panel-compact.in .panel-heading a:after {
content: "\e080";
}
$(function() {
$('.panel-collapse').on('show.bs.collapse', function () {
$(this).closest('.panel-compact').removeClass('in');
});
$('.panel-collapse').on('hide.bs.collapse', function () {
$(this).closest('.panel-compact').addClass('in');
});
});
