Editing Collapsible Lists With Bootstrap (section)

== HTML ==

<syntaxhighlight lang="twig" enclose="div" highlight="3,4,7">
		<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-->
</syntaxhighlight>

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-<nowiki>{{group.id}}</nowiki>`.
* '''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-<nowiki>{{group.id}}</nowiki>"` Element to target. 
** `aria-controls="collapse-list-<nowiki>{{group.id}}</nowiki>"` 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-<nowiki>{{ group_id }}</nowiki>"`: target for the collapsible element; corresponds to the `data-target` attribute of the button control.
** `aria-labelledby="collapse-list-heading-<nowiki>{{group_id}}</nowiki>"`: 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`.