Description: An accordion allows the user to view lengthy content quickly by browsing through various topics. Once the user has identified the topic, selecting the topic title will display content that fall below the title. The user can only view one topic at a time. As the user selects another title, the previous title will close creating an accordion effect.

508 Guidelines: In order to make accordions 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 accordion.

TIP: The first accordion will automatically be expanded. To stop this functionality and close all accordions remove the class .in; invertly, if every accordion needs to be open add the class .in.

Sample Heading 1You are on an accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion 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 accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion heading.

Sample Heading 3You are on an accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion heading.

Accordion

<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="headingOne">
               <h4>
                    <a class="panel-title collapsed accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
                    href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Sample Heading 1<span class="sr-only">You are on an accordion heading. 
                    To expand and view the content inside of the accordion press enter on the accordion heading.
                    To collapse the accordion press enter again on the accordion heading.</span></a>
               </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
               <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
               </div>
          </div>
     </div>
     <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
               <h4>
                    <a class="panel-title collapsed accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Sample Heading 2<span class="sr-only">You are on an accordion heading. 
                    To expand and view the content inside of the accordion press enter on the accordion heading.
                    To collapse the accordion press enter again on the accordion heading.</span></a>
               </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
               <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
               </div>
          </div>
     </div>
     <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
               <h4>
                    <a class="panel-title collapsed accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Sample Heading 3<span class="sr-only">You are on an accordion heading. 
                    To expand and view the content inside of the accordion press enter on the accordion heading.
                    To collapse the accordion press enter again on the accordion heading.</span></a>
               </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
               <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
               </div>
          </div>
     </div>     
</div>

Copy

Accordion

Sample Heading 1You are on an accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion heading.

Sample Heading 2You are on an accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion heading.

Sample Heading 3You are on an accordion heading. To expand and view the content inside of the accordion press enter on the accordion heading. To collapse the accordion press enter again on the accordion heading.