In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Accordion

The accordion allows you to expand or reduce a content section.

General guidelines

Accordion should be used to reduce cognitive workload on the screen. It’s an effective way to display content without having to create multiple pages. It is primarily used on pages with content (e.g.: product description, F.A.Q, etc.), but also in forms (to display secondary fields) or even in filter panels to have a section that can be enlarged or reduced.

The content inside the accordion may be editorial content: text, image, video etc.

It is possible to create accordion lists. Multiple accordions can be open simultaneously, either one by one or all at the same time (Collapse all / Unfold all).

Accordion1
Best practices
Accordion03DO

Always prefer clear and concise labels to facilitate reading and invite the user to scroll through the content.

Accordion03DONT

Try to make the title as short as possible. It will bring clarity and more straightforward information.

Accordion04DO

Always use a "+" icon to expand and an "-" icon to close.

Accordion04DONT

Do not use another icon to expand or close accordions.

Accordion05DO

Use a "Collapse all" and an "Unfold all" when grouping several accordions together. This allows the user to easily arrange the content visible on the screen.

Accordion05DONT

Don’t make it hard for the user to arrange the content visible on the screen.

Visual guidelines

Behaviours

Accordion has 5 states: default (collapse), hover, active (open), focus and disable. All the area of the collapse 

Accordion is interactive, meaning that the user don’t have to target the icon or the label to interact with the component.

Accordion2
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top