Top of page
Skip to main content
Main content

Accordion Menu

The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be exactly one item expanded at a time. An accordion is similar in purpose to a tabbed interface, a list of items where exactly one item is expanded into a panel.

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Usability

Adding accordions to your web page should be considered with great care. There are times when accordions enhance or prohibit a good user experience. Consider the options below when considering accordions.

Use Accordions When

  • The user only needs information applicable to him. For example, sections are divided by 1st, 2nd, 3rd, or 4th year student.
  • You want to descrease scrolling on a web page.
  • You want to give the user control over what to reveal and what to hide.

Avoid Accordions When

  • The user needs to see all of the content on a page.
  • When users need to print information from web page.
  • Clicking can cause an unpleasent user experience.
If the page is long, consider breaking content into smaller and digestable pages combined with the right component to make content easy to scan and retain.