Accordion

The Accordion component allows for the creation of a collection of panels arranged in an accordion on a page.

The 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 accordion's properties can be defined in the configure dialog.
• The order of the panels of the accordion can be defined in the configure dialog as well as the select panel popover.
• Defaults for the Accordion Component when adding it to a page can be defined in the design dialog.

Configure Dialog

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.

On the Items tab, 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.

The Properties tab contains the following specifications:

• 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

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.