The Core Component Accordion component allows for the creation of a collection of panels arranged in an accordion on a page.
The Core Component Accordion component allows for the creation of a collection of components, composed as panels, and arranged in an accordion on a page, similar to the Tabs Component , but allows for expanding and collapsing of the panels.
Version and Compatibility
The current version of the Accordion Component is v1, which was introduced with release 2.5.0 of the Core Components in June 2019, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
AEM as a Cloud Service
For more information about Core Component versions and releases, see the document Core Components Versions .
Sample Component Output
To experience the Accordion Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library .
The configure dialog allows the content author to define the accordion item, its panels, and how it will behave and appear for a visitor to the page.
Use the Add button to open the component selector to choose which component to add as a panel. Once added, an entry is added to the list, which contains the following columns:
- Icon - The icon of the component type of the panel for easy identification in the list. Mouse over to see the full component name as a tooltip.
- Description - The description used as the text of the panel, defaulting to the name of the component selected for the panel.
- Delete - Tap or click to delete the panel from the accordion component.
- Rearrange - Tap or click and drag to rearrange the order of the panels.
If the viewport of the page is reduced so that the edit dialog becomes full screen, the Add button will be hidden. Components can still be added to the Accordion Component by dragging from the components browser and dropping on the Accordion Component in the page editor .
- Single item expansion - When selected, this option forces a single accordion item to be expanded at a time. Expanding one item will then collapse all others.
- Expanded items - This option defines the items that are expanded by default when the page is loaded.
- When Single item expansion is selected, one panel must be selected. By default the first panel is selected.
- When Single item expansion is not selected, this option is a multi-select and is optional.
- ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
Select Panel Popover
The content author can use the Select Panel option on the component toolbar to change to a different panel for editing as well as to easily rearrange the order of the panels within the accordion.
Once selecting the Select Panel option in the component toolbar, the configured accordion panels are displayed as a drop-down.
- The list is ordered by the assigned arrangement of the panels and is reflected in the numbering.
- The component type of the panel is displayed first, followed by the description of the panel in lighter font.
- Tapping or clicking an entry in the dropdown, switches the view in the editor to that panel.
- The panels can be rearranged in-place by using the drag handles.
The design dialog allows the template author to define the options available to the content author who uses the Accordion Component and the defaults set when placing the Accordion Component.
- Allowed Heading Elements - This multi-select drop-down defines the accordion item heading HTML elements that are allowed to be selected by an author.
- Default Heading Element - This drop-down defines the default accordion item heading HTML element.
Allowed Components Tab
The Allowed Components tab is used to define which components can be added as items to panels in the Accordion Component by the content author.
The Allowed Components tab functions in the same way as the tab of the same name when defining the policy and properties of a Layout Container in the Template Editor.
The Accordion Component supports the AEM Style System .