Components

Tabs Panels and Accordions

Tabs and Accordions are a great way to compartmentalize a huge amount of informaiton into "bite size chunks"!

While using a screenreader, you should be able to access each panel heading and panel body content. Also, when a tab panel or accordion panel is expanded/collapsed, their respective aria attributes, aria-expanded, aria-selected states should update to match the current state.0

Tab Panel Example

English

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

Spanish

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore

French

Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 



<div class="ex_tabs" data-example-id="togglable-tabs">
    <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li role="presentation" class="active"><a href="#english" id="english-tab" role="tab" data-toggle="tab" aria-controls="english" aria-expanded="true">English</a></li>
        <li role="presentation" class=""><a href="#spanish" role="tab" id="spanish-tab" data-toggle="tab" aria-controls="spanish" aria-expanded="false">Spanish</a></li>
        <li role="presentation" class=""><a href="#french" role="tab" id="french-tab" data-toggle="tab" aria-controls="french" aria-expanded="false">French</a></li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade active in" role="tabpanel" id="english" aria-labelledby="english-tab">
            <h5>English</h5>
            <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
            </p>
        </div>
        <div class="tab-pane fade" role="tabpanel" id="spanish" aria-labelledby="spanish-tab">
            <h5>Spanish</h5>
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            </p>
        </div>
        <div class="tab-pane fade" role="tabpanel" id="french" aria-labelledby="french-tab">
            <h5>French</h5>
            <p>
                Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
        </div>
    </div>
</div>
Example 


<div class="panel-group" id="accordion-related-careers" >
    <div class="panel panel-default">
        <div class="panel-heading" id="heading0">
            <div class="panel-title">
                <a href="#collapse0" class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse0" aria-expanded="true" aria-selected="true" aria-controls="collapse0" data-parent="#accordion-related-careers">Food Service Manager</a>
            </div>
        </div>
        <div id="collapse0" class="panel-collapse collapse in" aria-labelledby="heading0">
            <div class="panel-body">
                <strong class="important-text">$21.51</strong> Hourly Wage
                <p>Plan, direct, or coordinate activities of an organization or department that serves food and beverages.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="heading1">
            <div class="panel-title">
                <a href="#collapse1" class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-selected="false" aria-controls="collapse1" data-parent="#accordion-related-careers">Chef and Head Cook</a>
            </div>
        </div>
        <div id="collapse1" class="panel-collapse collapse" aria-labelledby="heading1">
            <div class="panel-body">
                <strong class="important-text">$23.26</strong> Hourly Wage
                <p>Direct and may participate in the preparation, seasoning, and cooking of salads, soups, fish, meats, vegetables, desserts, or other foods. May plan and price menu items, order supplies, and keep records and accounts.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="heading2">
            <div class="panel-title">
                <a href="#collapse2" class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-selected="false" aria-controls="collapse2" data-parent="#accordion-related-careers">First-Line Supervisor of Food Preparation and Serving Workers</a>
            </div>
        </div>
        <div id="collapse2" class="panel-collapse collapse" aria-labelledby="heading2">
            <div class="panel-body">
                <strong class="important-text">$15.20</strong> Hourly Wage
                <p>Directly supervise and coordinate activities of workers engaged in preparing and serving food.</p>
            </div>
        </div>
    </div>
</div>