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.
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
release 2.17.4 and prior
For more information about Core Component versions and releases, see the document Core Components Versions.
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 latest technical documentation about the Accordion Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
To do this:
Navigating to the URL with the panel ID as anchor, the browser will scroll directly to the particular component and display the specified panel. If the panel is configured to not be expanded by default, it will be expanded automatically.
All Core Components are designed to be fully responsive, ensuring a seamless experience across devices.
Some some advanced components like the Accordion Component may require specific consideration within the context of the implementing project in order to maintain responsiveness in all conditions. Please see the document Responsive Design of the Core Components for more information.
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:
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.
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 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.
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.
The Accordion Component supports the Adobe Client Data Layer.