Collapsible Lists With Bootstrap

HTML

<div class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="collapse-list-heading-{{group.id}}">
					<h2 class="panel-title">{{ group.name }} <button class="btn btn-default btn-xs btn-toggle-tutorial-list" type="button" data-toggle="collapse" data-target="#collapse-list-{{group.id}}" aria-expanded="false" aria-controls="collapse-list-{{group.id}}" title="toggle tutorial group"><span class="glyphicon glyphicon-chevron-down"></span></button></h2>					
				</div>
				<div class="panel-body">{{ tutorials.count }} tutorial{% if tutorials.count != 1 %}s{% endif %}</div>
				<div class="panel-collapse collapse" id="collapse-list-{{ group_id }}" role="tabpanel" aria-labelledby="collapse-list-heading-{{group_id}}" aria-expanded="false">
					<ul class="list-group">
						<li class="list-group-item container-fluid">...</li>
						<li class="list-group-item container-fluid">...</li>
						<li class="list-group-item container-fluid">...</li>
					</ul>
				</div><!--end .panel-collapse-->
			</div><!--end .panel-->
		</div><!--end .panel-->

Bootstrap provides all the JavaScript to expand and collapse the list once the required classes and attributes are set.

Assigning the aria-expanded="false" attribute will cause the list to be collapsed initially.

This doesn't necessarily have to be contained in a .panel-group container.

• Header
  • Target the heading element with `#collapse-list-heading-{{group.id}}.
• Button
  • .btn-toggle-tutorial-list is the button's selector for the purposes of custom jQuery. This is to update the button's icon depending on the state of the list (collapsed or expanded); it doesn't have anything to do with the needs of Bootstrap.
  • type="button" prevents the button from acting as a submit button.
  • data-target="#collapse-list-{{group.id}}" Element to target.
  • aria-controls="collapse-list-{{group.id}}" is for the purposes of acccessibility.
  • aria-expanded="false" allows jQuery to test the collapsed state of the list.
• Listings
  • class="panel-collapse collapse" Bootstrap classes for the collapsing element. Again, .panel-collapse is in there just because this is a panel.
  • id="collapse-list-{{ group_id }}": target for the collapsible element; corresponds to the data-target attribute of the button control.
  • aria-labelledby="collapse-list-heading-{{group_id}}": Accessibility aid.
  • aria-expanded="false": Hook to test state of the collapsible element.
  • Whatever is placed inside of the .collapse element will be hidden while the element is collapsed. In this case it's a .list-group`.

jQuery to toggle button icon

toggleCollapseButton: function() {
	if ($(this).attr('aria-expanded')==='true') {
		$('span.glyphicon', $(this)).switchClass('glyphicon-chevron-up', 'glyphicon-chevron-down');
	}
	else {
		$('span.glyphicon', $(this)).switchClass('glyphicon-chevron-down', 'glyphicon-chevron-up');
	}
}