An accordion is an element of user interface (UI) design. It involves arranging content into vertically stacked, listed items that are initially hidden (collapsed) from view, with each item placed under a continually visible descriptive heading.
The visibility of a list item can be controlled by selecting its respective heading. Depending on the configuration, one or multiple list items can be visible or expanded at any one time. With the former configuration, it is common to have any one item initially expanded, while in the latter all items are initially collapsed. Both types of configuration are shown in the example proof of concept.
An accordion gets its name from the musical instrument in which sections of bellows can be expanded and collapsed by pulling outwards and inwards. The screenshots below show accordion configuration examples in desktop and mobile environments.
The example above comprises two accordion configuration examples. Example one shows three accordion items (headings and paragraphs) where multiple items can be visible or expanded at any one time. This is indicated by the expand/collapse or +/- icons in the headings. All items are initially collapsed. The second item in the example has been expanded. Example two shows three accordion items (heading and paragraphs) where only one item can be expanded at any one time. This is indicated by the presence of the expansion icon only. The first item is expanded by default in the example.
To view example in web browser.
Why use it?
Accordions enable the user to locate content of interest in a list without having to vertically scroll excessively on a page. This can be particularly useful in designs where vertical height is constrained or when viewing on smaller screen devices such as mobile phones or tablets. Accordions provide a means of presenting content in a compact and easily navigable way, which can be useful for email layouts viewed on mobile devices. Accordions can provide a visually-pleasing way of presenting content.
When to use it?
You may use accordions when:
- Content can be organised into items that share a similar or common purpose in a list. For example, a list of frequently asked questions.
- The content can be organised using descriptive headings that indicate what content will follow.
- There is such a large quantity of content, hiding it from view will benefit the user.
4. If information in each item must be visible on screen at the same time for the user to make comparisons, the type of accordion behaviour configuration should be considered. A configuration that limits one visible or expanded item at any one time is unlikely to be suitable in this case.
Which email reading environments support accordions?
At the time of writing, accordion functionality is supported by:
- Apple Mail on Mac (desktop application)
- Outlook for Mac (desktop application)
- iPhone Mail (mobile)
- IPad Mail (tablet)
- Samsung Mail (mobile)
- Android 4.4 Mail (mobile, tablet)
Please ask your Profusion contact for an email environment opens report. This estimates the percentage of recipients that open emails in these environments. For other popular email reading environments not listed above, but listed in Profusion’s Email QA handbook, accordion functionality email is not supported. For guidance on handling non-supporting email environments, please see the alternative fall-back presentation of interactive content section within this document.
Notes for designers and marketers
Presentation and interactivity
As users have pre-conceived ideas about how accordions should appear and behave on websites, it is important to keep the intuitive elements of these in the email. Accordions can be expanded by hovering over them with a cursor when using a pointing device such as a mouse. However, from a user experience standpoint we recommend activating it by left-clicking or tapping. Tapping is recommended for touchscreen devices.
For user intuitiveness throughout the email, arrange accordion items near each other and use consistent presentation styling. If the items possess a logical order, such as instruction steps, order them in a way that makes logical sense to the user. For the area that controls the expand and collapse container of the item, use heading copy that is descriptive of the content within that item. These should show the expanded/collapsed status and capabilities of the accordion. It is common to see downward and upward arrows or +/- icons to show the area can be expanded or collapsed. For the configuration of accordions that are restricted to showing only one item expanded at any one time, a collapse icon is not needed.
As accordion items are positioned to the left or right of the heading copy, use similar status indicator icons and positioning for user intuitiveness and familiarity. Please show the expanded and collapsed accordion design states in your supplied email design. Expanded and collapsed content items can include elements such copy and imagery. They do not need to be scrollable vertically or horizontally. The transition from collapsed to expanded states at moments of user interaction is usually developed in the email to show this brief, gradual change. However, where transition animation is not supported in the email environment, the state of transition will happen instantly.
Interactive content fall-back
What is a fall-back and why should my interactive email contain it?
When an email featuring interactive content is viewed in an environment that does not support it, an unpredictable user experience (such as loss of functionality, and/or presentation and layout issues in the email) may follow. This can be avoided by presenting alternative, non-interactive content within the email. This is referred to as a ‘fall-back’ – a design and development consideration for interactive emails.
Its purpose is to progressively enhance the appearance and functionality of the email where possible, and provide the best possible user experience. As fall-backs are best-effort attempts operating in email environments that are subject to change, they are not bulletproof.
Fall-back options for accordions
A design showing the presentation of the non-interactive, alternative fall-back content within the email should also be supplied.
You may choose to hide the expand/collapse indicators from headings and present all content items expanded by default, so that they are visible to the user without interaction (as shown). Alternatively, accordions and all related content can be hidden from popular email reading environments that do not support interactivity.
View more guides