Accordion

Description

An accordion allows generic content to be collapsed and allows users to expand to show more detail. It is an expandable and collapsible Text and Image list component.

The accordion component delivers large amounts of content in a small space through progressive disclosure. That is, the user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. A chevron (on the right) is used to indicate the “expand/collapse” action, though the entire header area is clickable for the same action.
 
  • The accordion component provides an overview to clustered topics.
  • Each topic consits of:
    • Toggle Container
      • Headline of the topic
      • Arrow indicating opened/closed state

Avoid:
 “Nested” accordions - that is, collapsible content within collapsible content and it goes against UX best practices.

Usage

Accordions are designed for use in the main content area. Use an accordion when you want to progressively disclose data. This is useful when the set of information is large or you want to enable users to reveal more complex or less frequently used data as necessary.
 

Accordion Types

  • The "big" Accordion (with the bigger height) with "highlight property" should be only used on Heropages.
  • The smaller version should be used on all other pages.

Placement 

  • The accordion should be only placed on bg-white, bg-light or bg-tertiary backgrounds
  • The accordion should be placed only in max. 10 Col, optimal is 6 to 8 cols

Accordion Content

  • There should only be text, images, videos, links or buttons in an accordion

Demonstration Normal accordion

This is an accordion in a "Content Layout container" (which is in a "Content Layout Container") and "Column Control" 6:6

This is a titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Example: Read more

View of a warehouse by ebm-papst (demo picture)
This is the (optional) text of the caption below the image.

Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

The picture on the left is placed as "standard".

Demonstration Highlight accordion

This is an accordion with "Highlight" property in a "Content Layout container" (which is in a "Content Layout Container") and "Column Control" 12

This is a titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Example: Read more

View of a warehouse by ebm-papst (demo picture)
This is the (optional) text of the caption below the image.

Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

The picture on the left is placed as "standard".

How to build an Accordion

Place the Accordion into a 6-, 8- or 10-col column (or 12-col column when a "highlight" accordion is needed).
 
Image of modal for setting up accordion component's items
  • Doubleclick on the accordion or choose the wrench tool at the component to get a setup modal for the accordion. 
  • Select the "items" tab in the modal, to place a component for the collapsible part of the accordion. This atleast is necassary to see a accordion on the page and to get the oppotunity to edit the title part of the accordion item. "Column control" is the only possible option to select for the collapsible panel.
Image of modal for setting up further accordion component's properties
  • Repeat "Add" to get as much  accordion-items as you need.
Image of modal for setting up accordion component's properties
  • After setting up the amount of accordion-items switch to the "Properties" tab to define the size of and the alignment inside the accordion
  • "Normal" variant is a common, standard sized accordion that usually is used on standard pages in a one or two column layout
  • Variant "Highlight" will show a larger accordion with higher item-title and larger font-size and should only be  used in 12-col layout on "hero pages"
  • "Left" and "Center" aligns only the item-title while the collapsible panel content is aligned by the components included in the column control
Image of an edited AEM accordion-component with black component's toolbar
  • By clicking the "Select panel" tool in the black toolbar of the component (second from left), the accordion's item titles are listed on a seperate layer and the order can be rearranged
  •  The associated item panel of the clicked title (on the layer) will be "opened" (behind the layer)
  • The  accordion's item panel content can be edited now that the panel is "opened"
  • The experience of expanding or collapsing several accordion items is only possible after switching into preview mode

Don'ts

Avoid the following

An accordion within this "Base Layout container" ist not allowed.

RadiPac for high static pressure

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Gebaeudebelueftung

There should be no full viewport width accordion.

The following Accordion must not be existent or at least should not be built like this.
It is not possible to add an accordion into a "Base Layout container".
First you will need at least a "Content Layout Container" or "Column Control".

Please do not build accordion like the following (full width) Accordion!

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.