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.

Usage

Use accordion in cases when it is necessary, especially for reasons of visibility on the screen, to have a section that can be enlarged or reduced. The content inside the accordion may be text, images or text fields.

AccordionVisual2x

Best Practices

- Use the accordion to show information that is not high priority (error messages, etc.).

- Use the accordion for a subject with the same content.

- Allow accordions group to be open simultaneously.

- Prefer short and concise labels.

 

Placement

Accordions are primarily used on pages with content (e.g.: product description, fact sheet...), but also in forms (to display secondary fields) or even in filter panels.

Visual

Appearance

Accordions have an action icon on their right side: a "+" icon to expand and an “-“ icon to close.

Behavior

It is possible to create accordion lists. When doing so, they may all be opened simultaneously.

Back to top