Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Deck of Cards
idcomponent_details
startHiddenfalse
Card
iddesktop-usage
defaulttrue
labelDesktop Usage

Desktop Usage

Standard accordion

Image Modified

Quick summary of style features:

  • Only one panel can be opened at a time. Opening one closes the others.
  • The entire title bar is clickable (changed the Bootstrap default of only the text link).

When to use this style:

  • When users need to focus on a single thing at a time.

Progressive disclosure accordion

Image Modified

Quick summary of features:

  • The entire title bar is clickable (updated from the Bootstrap default of the text link).
  • None, any, or all panels may be opened at any given time.

When to use this component:

  • Useful when nesting accordions.
  • When a linear flow is not required.
  • When the desire or need to see multiple panels at any one time exists.

Linear/Sequential variant

Image Modified

Quick summary of features:

  • Only one panel may be opened at any given time. Opening one will close the others.
  • Often feature navigational buttons which progress through the panels linearly.

When to use this component:

  • When a linear or stepped approach is needed.
Card
idresponsive-usage
labelResponsive Usage

Responsive Usage

There is no additional usage requirements for mobile devices. The panels should be displayed as a block element and should take up the full width of the device.

Card
iddemos
labelDemos

Demos

HTML

Code Block
linenumberstrue
languagexml
firstline1
<section id="progressive_example">
    <h2>Progressive Disclosure</h2>
    <div class="btn-group group-toggle clearfix">
        <button class="btn btn-default btn-xs" data-action="show">Expand all</button>
        <button class="btn btn-default btn-xs" data-action="hide">Collapse all</button>
    </div>
    <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseTwo1" id="tabTwo1" data-toggle="collapse" data-parent="#accordion2" aria-controls="collapseTwo1" role="tab">
                    <span class="icon-angle-up"></span> Progressive Disclosure Group Item #1</a>
                </h4>
            </div>
            <div id="collapseTwo1" class="panel-collapse collapse collapse2 in" aria-labeledby="tabTwo1" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseTwo2" id="tabTwo2" data-toggle="collapse" data-parent="#accordion2" aria-controls="collapseTwo2" role="tab">
                    <span class="icon-angle-down"></span> Progressive Disclosure Group Item #2</a>
                </h4>
            </div>
            <div id="collapseTwo2" class="panel-collapse collapse collapse2" aria-labeledby="tabTwo2" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseTwo3" id="tabTwo3" data-toggle="collapse" data-parent="#accordion2" aria-controls="collapseTwo3" role="tab">
                    <span class="icon-angle-down"></span> Progressive Disclosure Group Item #3</a>
                </h4>
            </div>
            <div id="collapseTwo3" class="panel-collapse collapse collapse2" aria-labeledby="tabTwo3" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</section>
<section id="rollup_example">
    <h2>Stepped rollup</h2>
    <div class="panel-group" id="accordion3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseThree1" id="tabThree1" data-toggle="collapse" data-parent="#accordion3" aria-controls="collapseThree1" role="tab">
                    <span class="icon-angle-up"></span> Step 1</a>
                </h4>
            </div>
            <div id="collapseThree1" class="panel-collapse collapse collapse3 in" aria-labeledby="tabThree1" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    <div class="panel-actions clearfix">
                        <button class="btn btn-primary btn-sm pull-right" data-action="next">Next step</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseThree2" id="tabThree2" data-toggle="collapse" data-parent="#accordion3" aria-controls="collapseThree2" role="tab">
                    <span class="icon-angle-down"></span> Step 2</a>
                </h4>
            </div>
            <div id="collapseThree2" class="panel-collapse collapse collapse3" aria-labeledby="tabThree2" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    <div class="panel-actions clearfix">
                        <button class="btn btn-primary btn-sm pull-right" data-action="next">Next step</button>
                        <button class="btn btn-default btn-sm pull-right" data-action="prev">Previous step</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseThree3" id="tabThree3" data-toggle="collapse" data-parent="#accordion3" aria-controls="collapseThree3" role="tab">
                    <span class="icon-angle-down"></span> Step 3</a>
                </h4>
            </div>
            <div id="collapseThree3" class="panel-collapse collapse collapse3" aria-labeledby="tabThree3" role="tabpanel">
                <div class="panel-body" tabindex="-1">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    <div class="panel-actions clearfix">
                        <button class="btn btn-default btn-sm pull-right" data-action="prev">Previous step</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

Code Block
linenumberstrue
languagecss
firstline1
.panel-heading {
    padding: 0;
}

h4 a {
    display: block;
    padding: 10px 15px;
}

JavaScript

Code Block
linenumberstrue
languagejs
firstline1
$('.collapse1').collapse({
    toggle: false,
    parent: '#accordion1'
}).on('click', '.panel-title a', function() {
    if ($(this).parent().parent().parent().hasClass('in')) {
        $(this).find('span').toggleClass('icon-angle-down icon-angle-up');
    }
});

$('.collapse2, .collapse3').collapse({
    toggle: true
}).on('click', '.panel-title a', function() {
    if ($(this).parent().parent().parent().hasClass('in')) {
        $(this).find('span').toggleClass('icon-angle-down icon-angle-up');
    }
});


$('.group-toggle button').click(function(e) {
    e.preventDefault();
    $('.collapse2').collapse($(this).data('action'));
});


$('.panel-actions button').click(function(e) {
    var p = $(this).parent().parent().parent();
    if ($(this).data('action') == 'prev') {
        p.collapse('hide');
        p.parent().prev().children('.panel-collapse').collapse('show').find('.panel-body');
    } else if ($(this).data('action') == 'next') {
        p.collapse('hide');
        p.parent().next().children('.panel-collapse').collapse('show').find('.panel-body');
    } else {
    }
});

JSFiddle

View the JSFiddle for a working example of tabbed containers.

Card
idaccessibility
labelAccessibility Considerations
nextAfter0
Section

Accessibility Considerations

Panel titles (the toggling element) should be focusable and able to be activated. They should also be announced properly and have a unique id.
The associated content panel should have aria-labeledby="" which points to the id in the title.
Panel titles should also include aria-controls="" which points to the id of the content panel associated with the title.
Titles should have role="tab.
Content panels should have role="tabpanel 
Content panels should be focusable and focus should be sent to it when it is expanded/opened. The only case where this wouldn't be required is if the opened panel contains form fields, which would receive the next Tab focus.
If using buttons (say in a Rollup variant), the buttons should describe actions (e.g., Save and continue) indicating what's going to happen.

Behavior without scripting

Since the class .in is added to opened panels, those panels that do not have it will not be opened when the page loads. Include the .in class on all panels in your markup (so all panels display by default) and after JavaScript is loaded, remove the .in class from all panels but the first. This way, if JavaScript isn't present or is buggy and not working properly, all content will still be available.

Accessibility Resources

W3 HTML Validator
WebAim WAVE 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

Keyboard Shortcuts

Aside from the normal Tabbing and link/button activating, keyboard navigation may be added to accordion containers if desired. Arrow keys may optionally be used to move up, down, and within panels.

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

Includes usability research findings and recommendations, information from the UIM discussion page, links, chapters, articles, etc that supports the design decision.