C11. Accordian
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Jan 2021 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective:
The accordion provides a way for large amounts of content to be shown in a small amount of space through progressive disclosure. This content can be hidden or expanded as necessary.
Use case:
This component allows a content author to organise related content or information without taking much screen real estate.
Important content should not be housed in accordions as it does hide the information
An example of the accordion in action is the 'guided pathways' P03. Tools for your problem which contain accordions.
Business rules
BR-# | Business rules |
|---|---|
BR-1 | Any number of accordion rows can be added to the accordion component |
BR-2 | Each accordion row can be specified by the content author as to be opened or closed on initial page load. |
BR-3 | The content section within each accordion row must be populated by another AEM component, e.g. Rich Text or Image (is not directly editable) |
BR-4 | Any AEM component/s can be added within each accordion section. |
BR-5 | When adding multiple accordion components on the same page, their 'section heading' of the accordion container must be different from each other. |
BR-6 | Once published, on click of a collapsed accordion row, the accordion row will expand to show the content within. |
Design
The following examples are taken the from the ‘guided pathway’ priority feature.
Desktop | Mobile |
|---|---|
 Closed state  Open state
|
|
CMS Elements
# | Field | Description | Details | Mandatory? |
|---|---|---|---|---|
1 | Section Heading | The title to appear above the component | Text | No |
2 | Subtitle | A subtitle to appear under the Heading of the component | Text | No |
3 | Heading Type | Select whether the Accordion Heading appears as a H2 or H3 | Drop-down | No |
| Elements | Description | Details | Mandatory? |
4 | Item heading | The title text to appear within the individual Accordion row | Text | No |
5 | Open by default? | Select whether this accordion row is open or closed on page load | Drop-down (True/False) | No |
6 | Content parsys section | An AEM parsys field for the author to drag other components to fill the content for each accordion row | Parsys | - |