Accordion guidelines

Accordions are used to show and hide information.

States

Accordion sections can change their state or appearance so that users know what to do. These little visual cues nudge the user in the right direction.

Unselected

When an accordion row is unselected, it means that it isn’t currently open or expanded.

Selected

When an accordion row is selected, it means that it is currently open. When it is in this state, the user should see more information in the now expanded area. This expanded area is sometimes called a pane.

You can also select a sub-option; this is usually used for navigation purposes.

---

Accordion uses

Accordions have 2 primary uses, namely to chunk information and to navigate.

Chunking information

When you are faced with long sections of text, you may want to chunk and hide the non-essential information to make it less overwhelming for the user. One of the ways you can do this is by using an accordion.

You will often find these types of accordions on product pages on online stores or in FAQ sections on websites.

Navigation

When there are a lot of links that you need to house on a single webpage, a common suggestion is to group all these links into a side navigation accordion. That way, the user can simply find what they’re looking for without searching through a long list.

You can also use accordions to navigate through a single component.

---

Best practices

There are a few best practices when it comes to accordions. Overall, you want to make the task of seeking perfunctory information as easy as possible for the user.

Only put non-critical information inside an accordion

If you are using an accordion to chunk information, only put non-essential information inside. For example, on a product page, you wouldn’t put the price or brand name inside an accordion. You would, however, put the sizing guide, delivery questions, and product materials inside one.

Default to closed

Depending on your business requirements, it’s probably better to default the accordion to closed. The first reason for this is that non-critical content is put into an accordion anyway, so it makes sense to hide it rather than clutter the screen. The next reason is that on small devices, users may not realize that there are more options at the bottom of the accordion.

Choosing an icon

It is advisable that an accordion should always have an icon to indicate to users that it’s interactive. The 2 most common sets of indicators are arrows and plus and minus symbols.

---

Variations

There are many different variations of accordions. Using more specific input styles makes it more apparent to the user what they are expected to do. Some examples can be found in the Tree Pane guidelines.

---