Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Task marked complete
Section
Column
width80%
Panel
bgColor#f6f6f6
titleBGColor#333333
borderStylesolid
titleTabbed containers
borderColor#cccccc
titleColorwhite

Purpose: This document provides usage and guidance on implementing and using accordion containers

Category: Accordion, content container

Related jiras:

JIRA
columnskey,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverKuali: Jira
serverIdbe3acfec-fcc2-335b-8051-b2b053a39956
keyUXI-399
JIRA
columnskey,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverKuali: Jira
serverIdbe3acfec-fcc2-335b-8051-b2b053a39956
keyUXI-400

Process Phase:

  •  UXI JIRA Created (insert link above)
  •  Component Specification draft complete
  •  UXI code review complete
  •  Reconcile with UIM and KRAD existing designs
  •  Conduct user testing (if needed)
  •  Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  •  Reviewed with KAI
  •  Rice JIRA Created (in KULRICE Project)
  •  KRAD Implementation complete
  •  Component released (insert rice release version below)

Version: 1.0

 


Description

Accordion content containers (and progressive disclosure containers) are similar to tabbed containers in that they allow only a single piece of content to be visible at any given time. Accordion containers typically stack vertically and the title of each section functions also as the tab, and so activating it would toggle the visibility of its content. Unlike tabbed containers however, depending on the configuration of an accordion container, multiple panels may be visible at once. Accordion containers are especially good when stepping through content, for example a checkout process.

There are three different types of accordion containers:

  1. Standard
  2. Progressive disclosure
  3. Linear/Sequential

Standard

The standard accordion allows for only one panel to be open at any given time. Opening one panel will shut the others. These are the base for the Rollup style accordion container.

Progressive disclosure

These types of accordion containers allow multiple panels to be open any any given time and often include buttons to "expand all" or "collapse all". A popular example of this would be Gmail's conversation view. This style also works well with nested containers as often found in the Conflict of Interest module in Kuali.

Linear/Sequential

The Linear/Sequential style functions like the Standard style and allows only one container to be open at any given time. The difference here is that these typically function in a linear fashion. A good example of this would be a checkout process. The first panel might be an order summary, followed by shipping information, followed by billing information, followed lastly with a confirmation.

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

Desktop Usage

Standard accordion

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

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

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.