Skip to end of metadata
Go to start of metadata
Tabbed containers

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

Category: Accordion, content container

Related jiras: UXI-399 - Data cannot be retrieved due to an unexpected error UXI-400 - Data cannot be retrieved due to an unexpected error

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



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


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.


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.

The license could not be verified: License Certificate has expired!

  • No labels