Accordion

Example:

Source Code:

<div class="panel-group accordion" id="example-accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#example-accordion" href="#collapseOne" aria-controls="collapseOne">Accordion #1</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Accordion 1 content with <a href="#">link</a>
            </div>
        </div>
    </div>

<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#example-accordion" href="#collapseTwo" aria-controls="collapseTwo">Accordion #2</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Accordion 2 content
            </div>
        </div>
    </div>

<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#example-accordion" href="#collapseThree" aria-controls="collapseThree">Accordion #3</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Accordion 3 content
            </div>
        </div>
    </div>
</div>

Accordion List

Accordion lists are commonly used for things like FAQ's where the title exposes the description in an expanding menu fashion. Accordion List uses HTML5 roles, some ARIA properties, and IDs for accessibility.

Example:

Consectetur Fusce Euismod

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.

Pellentesque Justo Nibh Inceptos

Nullam Nibh Fermentum Vehicula

Source Code:

<ul id="accordion" class="accordion-list list-overstated" role="tablist" multiselectable="true">
    <li id="tab1" class="tab" aria-selected="false" aria-controls="panel1" aria-expanded="false" role="tab" tabindex="0">
        <a>Consectetur Fusce Euismod</a>
    </li>
    <div id="panel1" class="panel" aria-labelledby="tab1" aria-hidden="false" role="tabpanel">
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
    </div>
    <li id="tab2" class="tab" aria-selected="false" aria-controls="panel2" aria-expanded="false" role="tab" tabindex="0">
        <a>Pellentesque Justo Nibh Inceptos</a>
    </li>
    <div id="panel2" class="panel" aria-labelledby="tab2" aria-hidden="true" role="tabpanel">
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
    </div>

<li id="tab3" class="tab" aria-selected="false" aria-controls="panel3" aria-expanded="false" role="tab" tabindex="0">
        <a>Nullam Nibh Fermentum Vehicula</a>
    </li>
    <div id="panel3" class="panel" aria-labelledby="tab3" aria-hidden="true" role="tabpanel">
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
    </div>
</ul>