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

Collapsible lists/accordion, without script

Collapsible lists, or accordions, using <details> and <summary> combo.

With new .collapse-list class

Title
List content 



<details class="collapse-list">
  <summary class="collapse-list-header" id="headingOne">
    <div class="collapse-list-title">
      Title
      <span class="caret"></span>
    </div>
  </summary>
  <div class="collapse-list-content">
    List content
    ...
  </div>
</details>

And old .panel-group structure using <details> and <summary> combo.

Title

List content 



<div class="panel-group">
  <details class="panel panel-default">
    <summary class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        Title
        <span class="caret"></span>
      </h4>
    </summary>
    <div class="panel-collapse">
      <div class="panel-body">
        List content
          ...
      </div>
    </div>
  </details>
</div>

Collapsible lists/accordion, with script

For this variant 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.

With new .collapse-list class. 




<div class="collapse-list">
  <div class="collapse-list-header">
    <button type="button" id="togglePanel1" class="btn btn-link collapse-list-title" aria-controls="panel1" aria-expanded="false">
      Title
      <span class="caret"></span>
    </button>
  </div>
  <div role="region" id="panel1" class="collapse-list-content" aria-labelledby="togglePanel1" aria-hidden="true">
    List content
    ...
  </div>
</div>

And old .panel-group structure

					


<div class="panel-group">
  <div class="panel">
    <div class="panel-heading">
      <h4 id="headingOne" class="panel-title">
        <a role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
          First Group Title <span class="caret caret-large-blue"></span>
        </a>
      </h4>
    </div>
    <div role="region" id="collapseOne" class="panel-collapse collapse in" aria-labelledby="headingOne" aria-hidden="true">
      <div class="panel-body">
        List content
      </div>
    </div>
  </div>
</div>

Collapsible lists/accordion, with multilevels

With new .collapse-list class, using <details> and <summary> combo.

Title 1
Title 1-1
Content 1-1
Title 1-2
Content 1-2
Title 1-3
Content 1-3
Title 1-4
Content 1-4
Title 1-5
Content 1-5
Title 2
Title 2-1
Content 2-1
Title 2-2
Content 2-2
Title 2-3
Content 2-3
Title 3
Title 3-1
Content 3-1
Title 3-2
Content 3-2
Title 3-3
Content 3-3
Title 3-4
Content 3-4
Title 4
Title 4-1
Content 4-1
Title 4-2
Content 4-2 



<div class="group-list">
  <details class="collapse-list">
    <summary class="collapse-list-header">
      <div class="collapse-list-title">
        Title 1
        <span class="caret"></span>
      </div>
    </summary>
    <div class="collapse-list-content">
	  <details class="collapse-list">
        <summary class="collapse-list-header">
          <div class="collapse-list-title">
            <span class="caret"></span>
            Title 1.1
          </div>
        </summary>
        <div class="collapse-list-content">
          List content 1.1
          ...
        </div>
      </details>
	   ...
    </div>
  </details>
  <details class="collapse-list">
    <summary class="collapse-list-header">
      <div class="collapse-list-title">
        Title 2
        <span class="caret"></span>
      </div>
    </summary>
    <div class="collapse-list-content">
      List content 2
      ...
    </div>
  </details>
   ...
</div>

With old .panel-group structure, using <details> and <summary> combo.

First Group Title

Item 1.1

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.

Item 1.2

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.

Item 1.3

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.

Second Group Title

Item 2.1

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.

Item 2.2

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.

Item 2.3

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.

Third Group Title

Item 2.1

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.

Item 2.2

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.

Item 2.3

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.




<div class="panel-group">
  <details class="panel panel-default">
    <summary class="panel-heading">
      <h4 class="panel-title">
        Title 1
        <span class="caret"></span>
      </h4>
    </summary>
    <div class="panel-collapse">
      <div class="panel-body">
        <details class="panel panel-default">
          <summary class="panel-heading">
            <h4 class="panel-title">
              <span class="caret"></span>
              Title 1.1
            </h4>
          </summary>
          <div class="panel-collapse">
            <div class="panel-body">
              List content 1.1
              ...
            </div>
          </div>
        </details>
        <details class="panel panel-default">
          <summary class="panel-heading">
            <h4 class="panel-title">
              <span class="caret"></span>
              Title 1.2
            </h4>
          </summary>
          <div class="panel-collapse">
            <div class="panel-body">
              List content 1.2
              ...
            </div>
          </div>
        </details>
        ...
      </div>
    </div>
  </details>
  <details class="panel panel-default">
    <summary class="panel-heading">
      <h4 class="panel-title">
        Title 2
        <span class="caret"></span>
      </h4>
    </summary>
    <div class="panel-collapse">
      <div class="panel-body">
        List content 2
          ...
      </div>
    </div>
  </details>
   ...
</div>

With new .collapse-list structure (div's).

For this variant component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.




<div class="group-list">
  <div class="collapse-list">
    <div class="collapse-list-header">
      <button type="button" id="togglePanelA" class="btn btn-link collapse-list-title" aria-controls="panelA" aria-expanded="false">
        Title 1 (with 'button')
        <span class="caret"></span>
      </button>
    </div>
    <div role="region" id="panelA" class="collapse-list-content" aria-labelledby="togglePanelA" aria-hidden="true">
      <div class="collapse-list">
        <div class="collapse-list-header">
          <button type="button" id="togglePanelA1" class="btn btn-link collapse-list-title" aria-controls="panelA1" aria-expanded="false">
            <span class="caret"></span>
            Title 1-1
          </button>
        </div>
        <div role="region" id="panelA1" class="collapse-list-content" aria-labelledby="togglePanelA1" aria-expanded="false">
          List content 1-1
        </div>
      </div>
      ...
    </div>
  </div>
  <div class="collapse-list-header">
      <a type="button" href="#!" id="togglePanelB" class="collapse-list-title" aria-controls="panelB" aria-expanded="false">
        Title 2 (with 'a')
        <span class="caret"></span>
      </a>
    </div>
    <div role="region" id="panelB"  class="collapse-list-content" aria-labelledby="togglePanelB" aria-hidden="true">
      <div class="collapse-list">
        <div class="collapse-list-header">
          <a type="button" href="#!" id="togglePanelB1" class="collapse-list-title" aria-controls="panelB1" aria-expanded="false">
            <span class="caret"></span>
            Title 2-1
          </a>
        </div>
        <div role="region" id="panelB1" class="collapse-list-content" aria-labelledby="togglePanelB1" aria-hidden="true">
          List content 2-1
        </div>
      </div>
      ...
    </div>
  </div>
    ...
</div>

With old .panel-group and old structure.

For this variant 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

div.panel.panel-default


					


<div class="panel-group" id="accordion">
  <div class="panel">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a role="button" id="togglePanelOne" class="" href="#collapseOne" data-toggle="collapse" aria-controls="collapseOne" aria-expanded="true">
          First Group Title <span class="caret caret-large-blue"></span>
        </a>
      </h4>
    </div>
    <div role="region" id="collapseOne" class="panel-collapse collapse in" aria-labelledby="togglePanelOne" aria-hidden="false">
      <div class="panel-body">
        <div class="panel">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a role="button" id="togglePanelOne" class="" href="#collapseOneOne" data-toggle="collapse" aria-controls="collapseOneOne" aria-expanded="true">
                <span class="caret"></span> Item 1.1
              </a>
            </h4>
          </div>
          <div role="region" id="collapseOneOne" class="panel-collapse collapse in" aria-labelledby="togglePanelOne" aria-hidden="false">
            <div class="panel-body">
              ...
            </div>
          </div>
        </div> <!-- /.panel - Item 1.1 -->
        <div class="panel">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a role="button" id="togglePanelTwo" class="collapsed" href="#collapseOneTwo" data-toggle="collapse" aria-controls="collapseOneTwo" aria-expanded="false">
                <span class="caret"></span> Item 1.2
              </a>
            </h4>
          </div>
          <div role="region" id="collapseOneTwo" class="panel-collapse collapse" aria-labelledby="togglePanelTwo" aria-hidden="true">
            <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">
      <h4 class="panel-title">
        <a role="button" id="togglePanelTwo" class="collapsed" href="#collapseTwo" data-toggle="collapse" aria-controls="collapseTwo" aria-expanded="false">
          Second Group Title <span class="caret caret-large-blue"></span>
        </a>
      </h4>
    </div>
    <div role="region" id="collapseTwo" class="panel-collapse collapse" aria-labelledby="togglePanelTwo" aria-hidden="true">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>  <!-- /.panel - Second Group Title -->
  ...
</div>