Description: Panel with list groups in accordion allows users to view list items grouped by categories and allows users to control the view by expanding or collapsing the accordions.
508 Guidelines: The instructions here are static, the instructions should change dynamically depending whether the accordion is exxpanded or collapsed.
<div class="accordion-container panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading">
<h4>
<a class="panel-title accordion-toggle" data-toggle="collapse" href="#collapse-heading" aria-expanded="true"
aria-controls="collapse-heading">Panel Heading<span class="sr-only">You are on an accordion heading. The accordion is expanded.
To collapse the accordion press enter on the accordion heading.</span></a>
</h4>
</div>
<div id="collapse-heading" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading">
<div class="panel-body">
<ul class="list-group list-group-accordion">
<li class="list-group-item"><a href="#">
<div class="row">
<div class="col-xs-6">
<p>Example</p>
</div>
<div class="col-xs-6">
<p>Split Column</p>
</div>
</div>
</a></li>
<li class="list-group-item"><a href="#">Item Two</a></li>
<li class="list-group-item"><a href="#">Item Three</a></li>
</ul>
</div>
</div>
</div>
</div>
Copy