Description: An expand and collapse allows the user to view multiple lengthly content in groups. The user can choose to view one content group at a time or view all of them at once. The view is dictated by the user.

508 Guidelines: In order to make expand and collapses 508 complaint for a keyboard user, adding href="#" to the heading will allow the user to tab to the link and select Enter on the keyboard to open and close the expand and collapse.

TIP: The expand and collapse can be all expanded by default or adding or removing the class "in"

Sample Heading 1You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Heading 2You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.

Sample Heading 3You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.

Expand and Collapse

<div class="accordion-container panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-one">
            <h4>
                <a  class="panel-title accordion-toggle" data-toggle="collapse" href="#collapse-one" 
            aria-expanded="true" aria-controls="collapse-one">Sample Heading 1<span class="sr-only">You are on an expandable and 
                collapsible heading. To expand or collapsed the content inside, press enter on 
                the heading.</span></a>
            </h4>
        </div>
        <div id="collapse-one" class="panel-collapse collapse in" role="tabpanel" 
        aria-labelledby="heading-one">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-two">
            <h4>
                <a class="panel-title accordion-toggle" data-toggle="collapse" href="#collapse-two" 
            aria-expanded="false" aria-controls="collapse-two">Sample Heading 2<span class="sr-only">You are on an expandable and 
                collapsible heading. To expand or collapsed the content inside, press enter on 
                the heading.</span></a>
            </h4>
        </div>
        <div id="collapse-two" class="panel-collapse collapse in" role="tabpanel" 
        aria-labelledby="heading-two">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-three">
            <h4>
                <a class="panel-title accordion-toggle" data-toggle="collapse" href="#collapse-three" 
            aria-expanded="false" aria-controls="collapse-three">Sample Heading 3<span class="sr-only">You are on an expandable and 
                collapsible heading. To expand or collapsed the content inside, press enter on 
                the heading.</span></a>
            </h4>
        </div>
        <div id="collapse-three" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-three">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

Copy

Expand and Collapse

Sample Heading 1You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.

Sample Heading 2You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.

Sample Heading 3You are on an expandable and collapsible heading. To expand or collapsed the content inside, press enter on the heading.