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

Example
HTML

Title

List content

<details class="collapse-list">
	<summary class="collapse-list-header">
		<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.

Deprecated! .panel-group are deprecated, will be removed soon.

Example
HTML

Title

List content

<div class="panel-group">
	<details class="panel panel-default">
		<summary class="panel-heading">
			<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.

Example
HTML

<div class="collapse-list">
	<div class="collapse-list-header">
		<button id="togglePanel1" type="button" class="btn btn-link collapse-list-title" aria-controls="panel1" aria-expanded="false" data-toggle="custom-toggle">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

Deprecated! .panel-group are deprecated, will be removed soon.

Example
HTML

First Group Title

<div class="panel-group" id="accordion">
    <div class="panel">
        <div class="panel-heading" id="headingOne">
            <h4 class="panel-title">
                <a role="button" class="collapsed" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" data-parent="#accordion">
                    First Group Title <span class="caret caret-large-primary"></span>
                </a>
            </h4>
        </div>
        <div role="region" id="collapseOne" class="panel-collapse collapse" 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.

Example
HTML

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">
                    Content 1-1
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 1-2</div>
                </summary>
                <div class="collapse-list-content">
                    Content 1-2
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 1-3</div>
                </summary>
                <div class="collapse-list-content">
                    Content 1-3
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 1-4</div>
                </summary>
                <div class="collapse-list-content">
                    Content 1-4
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 1-5</div>
                </summary>
                <div class="collapse-list-content">
                    Content 1-5
                </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">
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 2-1</div>
                </summary>
                <div class="collapse-list-content">
                    Content 2-1
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 2-2</div>
                </summary>
                <div class="collapse-list-content">
                    Content 2-2
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 2-3</div>
                </summary>
                <div class="collapse-list-content">
                    Content 2-3
                </div>
            </details>
        </div>
    </details>
    <details class="collapse-list">
        <summary class="collapse-list-header">
            <div class="collapse-list-title">Title 3 <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 3-1</div>
                </summary>
                <div class="collapse-list-content">
                    Content 3-1
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 3-2</div>
                </summary>
                <div class="collapse-list-content">
                    Content 3-2
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 3-3</div>
                </summary>
                <div class="collapse-list-content">
                    Content 3-3
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 3-4</div>
                </summary>
                <div class="collapse-list-content">
                    Content 3-4
                </div>
            </details>
        </div>
    </details>
    <details class="collapse-list">
        <summary class="collapse-list-header">
            <div class="collapse-list-title">Title 4 <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 4-1</div>
                </summary>
                <div class="collapse-list-content">
                    Content 4-1
                </div>
            </details>
            <details class="collapse-list">
                <summary class="collapse-list-header">
                    <div class="collapse-list-title"><span class="caret"></span> Title 4-2</div>
                </summary>
                <div class="collapse-list-content">
                    Content 4-2
                </div>
            </details>
        </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.

Example
HTML

Title 2 (with 'a' tag)

Title 2-1

Title 2-2

Title 2-3

Title 2-4

Title 2-5

<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" data-toggle="custom-toggle" aria-controls="panelA" aria-expanded="false">Title 1 (with button tag) <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" data-toggle="custom-toggle" 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-hidden="true">
                    Content 1-1
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <button type="button" id="togglePanelA2" class="btn btn-link collapse-list-title" data-toggle="custom-toggle" aria-controls="panelA2" aria-expanded="false"><span class="caret"></span> Title 1-2</button>
                </div>
                <div role="region" id="panelA2" class="collapse-list-content" aria-labelledby="togglePanelA2" aria-hidden="true">
                    Content 1-2
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <button type="button" id="togglePanelA3" class="btn btn-link collapse-list-title" data-toggle="custom-toggle" aria-controls="panelA3" aria-expanded="false"><span class="caret"></span> Title 1-3</button>
                </div>
                <div role="region" id="panelA3" class="collapse-list-content" aria-labelledby="togglePanelA3" aria-hidden="true">
                    Content 1-3
                </div>
            </div>
        </div>
    </div>
    <div class="collapse-list">
        <div class="collapse-list-header">
            <a type="button" href="#!" id="togglePanelB" class="collapse-list-title" data-toggle="custom-toggle" aria-controls="panelB" aria-expanded="false">Title 2 (with 'a' tag) <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" data-toggle="custom-toggle" 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">
                    Content 2-1
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <a type="button" href="#!" id="togglePanelB2" class="collapse-list-title" data-toggle="custom-toggle" aria-controls="panelB2" aria-expanded="false"><span class="caret"></span> Title 2-2</a>
                </div>
                <div role="region" id="panelB2" class="collapse-list-content" aria-labelledby="togglePanelB2" aria-hidden="true">
                    Content 2-2
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <a type="button" href="#!" id="togglePanelB3" class="collapse-list-title" data-toggle="custom-toggle" aria-controls="panelB3" aria-expanded="false"><span class="caret"></span> Title 2-3</a>
                </div>
                <div role="region" id="panelB3" class="collapse-list-content" aria-labelledby="togglePanelB3" aria-hidden="true">
                    Content 2-3
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <a type="button" href="#!" id="togglePanelB4" class="collapse-list-title" data-toggle="custom-toggle" aria-controls="panelB4" aria-expanded="false"><span class="caret"></span> Title 2-4</a>
                </div>
                <div role="region" id="panelB4" class="collapse-list-content" aria-labelledby="togglePanelB4" aria-hidden="true">
                    Content 2-4
                </div>
            </div>
            <div class="collapse-list">
                <div class="collapse-list-header">
                    <a type="button" href="#!" id="togglePanelB5" class="collapse-list-title" data-toggle="custom-toggle" aria-controls="panelB5" aria-expanded="false"><span class="caret"></span> Title 2-5</a>
                </div>
                <div role="region" id="panelB5" class="collapse-list-content" aria-labelledby="togglePanelB5" aria-hidden="true">
                    Content 2-5
                </div>
            </div>
        </div>
    </div>
</div>

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

Deprecated! .panel-group are deprecated, will be removed soon.

Example
HTML

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">
                First Group Title <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>Item 1.1
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 1.2
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 1.3
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p><i>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</i></p>
                        </div>
                    </div>
                </details>
            </div>
        </div>
    </details>
    <details class="panel panel-default">
        <summary class="panel-heading">
            <h4 class="panel-title">
                Second Group Title <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>Item 2.1
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 2.2
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 2.3
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
            </div>
        </div>
    </details>
    <details class="panel panel-default">
        <summary class="panel-heading">
            <h4 class="panel-title">
                Third Group Title <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>Item 2.1
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 2.2
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
                <details class="panel panel-default">
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <span class="caret"></span>Item 2.3
                        </h4>
                    </summary>
                    <div class="panel-collapse">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </details>
            </div>
        </div>
    </details>
</div>

With old .panel-group and old structure.

Deprecated! .panel-group are deprecated, will be removed soon.

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

Example
HTML

<h4>div.panel.panel-default</h4>
<br>
<div class="panel-group" id="accordionOld">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a role="button" href="#collapseOneOld" id="togglePanelOne" class="collapsed" data-toggle="collapse" data-parent="#accordionOld" aria-controls="collapseOneOld" aria-expanded="false">
                    First Group Title <span class="caret caret-large-primary"></span>
                </a>
            </h3>
        </div>
        <div role="region" id="collapseOneOld" class="panel-collapse collapse" aria-labelledby="togglePanelOne" aria-expanded="false" aria-hidden="true">
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseOneOneOld" id="togglePanelOneOne" class="collapsed" data-toggle="collapse" data-parent="#collapseOneOld" aria-controls="collapseOneOneOld" aria-expanded="false">
                                <span class="caret"></span>Item 1.1
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseOneOneOld" class="panel-collapse collapse" aria-labelledby="togglePanelOneOne" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseOneTwoOld" id="togglePanelOneTwo" class="collapsed" data-toggle="collapse" data-parent="#collapseOneOld" aria-controls="collapseOneTwoOld" aria-expanded="false">
                                <span class="caret"></span>Item 1.2
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseOneTwoOld" class="panel-collapse collapse" aria-labelledby="togglePanelOneTwo" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseOneThreeOld" id="togglePanelOneThree" class="collapsed" data-toggle="collapse" data-parent="#collapseOneOld" aria-controls="collapseOneThreeOld" aria-expanded="false">
                                <span class="caret"></span>Item 1.3
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseOneThreeOld" class="panel-collapse collapse" aria-labelledby="togglePanelOneThree" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p><i>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</i></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a role="button" href="#collapseTwoOld" id="togglePanelTwo" class="collapsed" data-toggle="collapse" data-parent="#accordionOld" aria-controls="collapseTwoOld" aria-expanded="false">
                    Second Group Title <span class="caret caret-large-primary"></span>
                </a>
            </h3>
        </div>
        <div role="region" id="collapseTwoOld" class="panel-collapse collapse" aria-labelledby="togglePanelTwo" aria-expanded="false" aria-hidden="true">
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseTwoOneOld" id="togglePanelTwoOne" class="collapsed" data-toggle="collapse" data-parent="#collapseTwoOld" aria-controls="collapseTwoOneOld" aria-expanded="false">
                                <span class="caret"></span>Item 2.1
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseTwoOneOld" class="panel-collapse collapse" aria-labelledby="togglePanelTwoOne" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseTwoTwoOld" id="togglePanelTwoTwo" class="collapsed" data-toggle="collapse" data-parent="#collapseTwoOld" aria-controls="collapseTwoTwoOld" aria-expanded="false">
                                <span class="caret"></span>Item 2.2
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseTwoTwoOld" class="panel-collapse collapse" aria-labelledby="togglePanelTwoTwo" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseTwoThreeOld" id="togglePanelTwoThree" class="collapsed" data-toggle="collapse" data-parent="#collapseTwoOld" aria-controls="collapseTwoThreeOld" aria-expanded="false">
                                <span class="caret"></span>Item 2.3
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseTwoThreeOld" class="panel-collapse collapse" aria-labelledby="togglePanelTwoThree" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a role="button" href="#collapseThree" id="togglePanelThree" class="collapsed" data-toggle="collapse" data-parent="#accordionOld" aria-controls="collapseThree" aria-expanded="false">
                    Third Group Title <span class="caret caret-large-primary"></span>
                </a>
            </h3>
        </div>
        <div role="region" id="collapseThree" class="panel-collapse collapse" aria-labelledby="togglePanelThree" aria-expanded="false" aria-hidden="true">
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseThreeOne" id="togglePanelThreeOne" class="collapsed" data-toggle="collapse" data-parent="#collapseThree" aria-controls="collapseThreeOne" aria-expanded="false">
                                <span class="caret"></span>Item 3.1
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseThreeOne" class="panel-collapse collapse" aria-labelledby="togglePanelThreeOne" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseThreeTwo" id="togglePanelThreeTwo" class="collapsed" data-toggle="collapse" data-parent="#collapseThree" aria-controls="collapseThreeTwo" aria-expanded="false">
                                <span class="caret"></span>Item 3.2
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseThreeTwo" class="panel-collapse collapse" aria-labelledby="togglePanelThreeTwo" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseThreeThree" id="togglePanelThreeThree" class="collapsed" data-toggle="collapse" data-parent="#collapseThree" aria-controls="collapseThreeThree" aria-expanded="false">
                                <span class="caret"></span>Item 3.3
                            </a>
                        </h4>
                    </div>
                    <div role="region" id="collapseThreeThree" class="panel-collapse collapse" aria-labelledby="togglePanelThreeThree" aria-expanded="false" aria-hidden="true">
                        <div class="panel-body">
                            <h3>Article / Content Title</h3>
                            <p>Sed aliquet ipsum sed augue porta lacinia. Morbi at iaculis enim. Morbi dictum magna in nulla euismod, sit amet condimentum quam lacinia.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>