Skip to content

Accordion

The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero expanded items or one item expanded at a time.

Accordions are useful for:

  • Bringing a set 3 to 10 related elements together
  • Require that only one element of a set is visible to reduce information overload
  • Hide a set of choices in an effort to “shortcut” the user’s potential selections
  • Reduce movement potential when interacting with large sections

How to use the Accordion

Accordions are good for short terms or phrases and their corresponding definitions. They’re usable even at smaller resolutions or when they only utilize a portion of the desktop layout.

Accordions are extremely good at preventing information overload, however that utility is diminished if there are too many terms. An accordion that scrolls off-screen when unopened can actually increase information overload.

Keep in mind that users expect to use an accordion to select the content that they want to view. Forcing a user to view all items is possible within the framework, but counter to user expectations.

Accordions should contain a small amount of information: A definition, a summary, an answer to a question. They are not able to contain more than a paragraph or two. Accordions should not contain complex layout within each panel, so columns, lists, tables and other layout should be avoided.

Do

  • Use Accordions for terms and reasonably sized definitions.
  • Use Accordions for FAQs.
  • Use Accordions if the user does not need to compare & contrast definitions or terms.

Don’t

  • Use Accordions for more than 2-3 paragraph descriptions (try Tabs instead).
  • Use Accordions if the terms are longer and would wrap to more than one line.
  • Use Accordions if there are fewer than 3 terms (try Tabs instead).
  • Use Accordions for terms that the user is required to compare.

Unstyled Example

Example Code

<div id="unstyled-accordion" class="accordion">
   <h2 class="accordion-header"><button type="button">The First Term</button></h2>
   <div class="accordion-panel" hidden>
      <div class="inner">
         <p>This is the first term's details</p>
      </div>
   </div>
   <h2 class="accordion-header"><button type="button">The Second Term</button></h2>
   <div class="accordion-panel" hidden>
      <div class="inner">
         <p>This is the second term's details.</p>
      </div>
   </div>
   <h2 class="accordion-header"><button type="button">The Third Term</button></h2>
   <div class="accordion-panel" hidden>
      <div class="inner">
         <p>This is the third term's details.</p>
      </div>
   </div>
</div>
document.addEventListener('ready', function() {
  // Initialize Component Instance
  Accordion.create('#unstyled-accordion');
  // Handle Complete Event
  document.getElementById( 'unstyled-accordion' ).addEventListener( 'complete', function () { 
    console.log( 'I am complete' ); 
  });
});