Collapsible list

Collapsible lists, or accordions, is a well established pattern for progressive disclosure. It is useful when you wish to present the user with the most critical or meaningful information first while still making more details available.

Use when

  • You wish to highlight important details of a section and reveal more details upon a tap or click.

Design

For this component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.
You can also use the scripts we use for our examples. For this case - collapsible lists - you need to use collapsible-list.js 

				
// Button classes on a, button or input tags
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          First Group Title <span class="caret caret-large-blue"></span>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="panel">
          <div class="panel-heading" role="tab" id="headingOneOne">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne">
                <span class="caret"></span> Item 1.1
              </a>
            </h4>
          </div>
          <div id="collapseOneOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneOne">
            <div class="panel-body">
              ...
            </div>
          </div>
        </div> <!-- /.panel - Item 1.1 -->
        <div class="panel">
          <div class="panel-heading" role="tab" id="headingOneTwo">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOneTwo" aria-expanded="true" aria-controls="collapseOneTwo">
                <span class="caret"></span> Item 1.2
              </a>
            </h4>
          </div>
          <div id="collapseOneTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneTwo">
            <div class="panel-body">
              ...
            </div>
          </div>
        </div> <!-- /.panel - Item 1.2 -->	
        <div class="panel">
          ...
        </div> <!-- /.panel - Item 1.3 -->
      </div>
    </div>
  </div> <!-- /.panel - First Group Title -->
  
  <div class="panel">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Second Group Title <span class="caret caret-large-blue"></span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>  <!-- /.panel - Second Group Title -->
  ...
</div>