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

Article / Content Title

Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.

				
// 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>