Accordion

Accordion provides a frame with a header that can be expanded to reveal additional content. Multiple accordion elements may be grouped together.

Interactive demo

This demo lets you preview the accordion component and its variations.

<CodeViewerExample>
  <Accordion>
    <AccordionItem>
      <AccordionSummary>
        <p>
          Accordion Summary
        </p>
      </AccordionSummary>
      <AccordionDetails>
        <p>
          Accordion Details - You can add anything as details. Links, div, images or whatever you fancy
        </p>
        <p>
          This is just another p-tag.
        </p>
      </AccordionDetails>
    </AccordionItem>
  </Accordion>
</CodeViewerExample>

Usage

Use Accordion in scenarios where you need to provide additional information or controls. Example uses can be among others: Q&A articles in a help section or additional form controls that are not mandatory for completion of a task.

Content

Consider what content is appropriate to place within an accordion.

Do

Use Accordion to reveal optional or extra information or controls.

Don't

Hide critical information or mandatory controls in a form inside an accordion.

Alternatives

Specifically for contextual help, a contextual dialog may be the preferrable choice of component.

Formatting

Anatomy

Accordion consists of a frame containing a title and an icon, along with a content section in its expanded state.

1. Collapsed
   a. Frame
   b. Title
   c. Icon
   
2. Expanded
   a. Frame
   b. Title
   c. Icon
   d. Content
   

Frame

The containing frame of the component (not applicable for the flat theme). The frame is solid white (@white), has a faint outline (@grey200) and elevation level 100.

Title

The title of the frame displayed both in the collapsed and expanded state. The title text may overflow into multiple lines if required.

Icon

The icon indicates whether the accordion is currently in its collapsed or expanded state. When transitioning between the collapsed and expanded states the icon rotates 180 degrees in a brief animation.

Content

The content revealed in the expanded state.

Behavior

States

When interacted with, the frame expands from the collapsed state, revealing additional content. Unlike for example a dropdown menu, accordion pushes other content (or other accordion elements in the group) located below.

Collapsed

Expanded

Grouping

Multiple accordion elements may be grouped together. In the collapsed state multiple grouped accordion elements stack vertically. When expanding a grouped accordion element it separates slightly from the surrounding elements, pushing content below downwards.

Single

Grouped

Modify

Accordion can be extended or contracted horizontally as desired but usually expands to the horizontal edges of the surrounding frame.

Title

A helpful title indicating what the user could expect to be revealed when interacting with the component.

Content

Accordion allows for certain freedom in what content it may contain. Typically, the content of the expandable section is text, or a list, such as an article or a help section. More complex content such as graphics or additional form controls can also be considered appropriate.

Branding

Three different branding options are available: Neutral, Tur and S&C. Neutral and Tur features a design with rounded corners, while the corners of the S&C version are sharp. The expanded animation differs slightly depending on brand, where the neutral and Tur version is softer, with a slight bounce, whereas the S&C animation is faster and sharper.

Neutral and Tur branding.

S&C branding.

Theme

A flat version of accordion is available, stripped of borders and elevation, intended to be used within a card with an expandable sub section.

Inverted

Accordion is available for all brandings and themes in inverted colors to be used on dark backgrounds.