Accordion

PATTERN OVERVIEW

Organize content into an expandable stack, one on top of the other. When the user clicks to expand, additional content organized into one or two columns is displayed.

The accordion component can be used with other AEM components to build out multiple layout scenarios. In addition, the component can be placed inside a column control to control the width of the accordion.

Usage guidelines

• Use when you want to give users the ability to hide content to better focus on a task or to shorten the length of the overall page.  Make sure that use of the accordion make it easier for the user to scan and quickly get to the content they need. Is the extra click to open the accordion worth the effort for the visitor?

AEM component: Use the "Accordion V2" component. 

Requirements

Panel heading: Up to 60 characters max (including spaces) if possible

Copy: Broken up into paragraphs of 270 characters or less

Type alignment: Left aligned

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For body copy, use sentence case with complete and punctuated sentences.