Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Components

Accordion

Overview

When to use

Use an accordion if it’s helpful for the user to see an overview of multiple, related sections of content and choose to show and hide sections that are relevant to them.

When not to use

Do not use an accordion for critical information or content that all users will need to see.

Test your content without an accordion first. Consider if it’s better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content.

Do not put accordions inside accordions, as it will make content difficult to find.

Do not use accordions to create step-by-step forms.

Accordions vs Tabs​

If you decide to use one of these components, consider if:

  • the user needs to look at more than one section at a time – an accordion can show multiple sections at a time, unlike tabs
  • the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike accordions
  • there are many sections of content – accordions can fit more sections as they’re arranged vertically, unlike tabs which are arranged horizontally.

Principles​

An accordion will usually start with all sections hidden. To show a section, the user can interact anywhere in the heading area.

Write the title like any other button text. Use sentence case, describe the content that will show, and keep it short. Users of screen readers might find it difficult to navigate the accordion if the title is too long.

Do not auto-close or auto-open accordions an do not auto-scroll the opened accordion to the top of the screen.

Suffix​