(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Accordion

Overview

The Dynamic Accordion component is a collapsible content container that organizes information into expandable and collapsible sections. This component provides an efficient way to present large amounts of content in a limited space by allowing users to expand only the sections they're interested in while keeping others collapsed. Each accordion item (child of this component) has a title that remains visible and content that can be shown or hidden.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Product FAQ" allows for easy identification of the accordion's purpose in the component structure.

Visual Properties

• elements - Defines the accordion items configuration for the accordion. This array contains DynamicAccordionItemComponent objects that make up the expandable sections. Each accordion item has its own properties including title and content.

• paddingClass - Configures spacing around the accordion content using CSS classes. For example, "p-4" adds medium padding on all sides of the accordion for better visual separation from surrounding elements.

Testing hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "faq-accordion" allows test scripts to reliably locate this component.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the accordion component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
  • ON_DESTROY: Triggered when the accordion component is removed from the DOM. Useful for cleanup operations and releasing resources