Expandable information

Expandable information

Accordions keep an interface clean, while still allowing viewing of large amounts of content

When creating web pages, we need to balance conserving space with providing utility. Small mobile screens don’t make that easy! Accordions are a great option that show and hide options upon click. They do increase the length of a page or view, however, they’re handy to have when you need to cram a lot into very little.

Accordions are best used as a method for displaying groups of content. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching.

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Item 1
  • Item 2
  • Item 3

Accordion 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

When to use accordions

Consider a vertical accordion instead of tabs when the width of the screen is too restrictive to support all the categories of a given set of information. For this reason, vertical accordions have the added benefit of relatively straightforward transition between screen sizes. If topics are independent of one another, only one section should be expanded at a time.

An accordion:

  • maintains screen layout
  • helps the user focus on the content of interest
  • is easier to scan and navigate to different sections

Think of accordions as content management tools; when you have a page that is broken into dozens of paragraphs, links, images, or just too many blocks of content … accordion menus to the rescue!

Just be sure that each accordion component has a real purpose. If content can just be listed down the page, surmised in a few sentences, without forcing the user to click on each heading or each answer can be, hiding that content isn’t going to improve the user experience.

Accordions are best used with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organise content in a way that makes navigation simpler than by using endless scrolling.

Back to the top of this page