Accordions
Last updated: September 10, 2015 at 21:07 pm

A set of content blocks whose pieces can be collapsed to hide content or expanded to show content.


Visual example of the element:


What problem does this element or pattern solve?
Some pages need to include a large amount of content, however, users can be easily overwhelmed by an abundance of content and may simply leave the site. An accordion allows content to be temporarily hidden, giving users a more welcoming view of the page. The accordion must make expandability of content obvious so users do not miss out on the necessary content, however.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Do your accordion panels show only one content panel at a time, or can they be expanded to show multiple panels simultaneously?
  • Do panels expand on click, or on hover only? It is best to select one interaction method in order to increase the learnability of your site.
  • Is there a limit on the amount and type of content within each panel? This will insure that one panel does not display significantly more information than any others.
  • Define the visual styling for the accordion container, title bars and content areas.
  • Call out any changes in the hover and active states for your panels. This includes the typography and colors for both the title and main content areas.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
expand/collapse, show/hide
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply