(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.
  • It organizes information into expandable and collapsible sections.
  • Each accordion item (child component) has a title that remains visible.
  • The content of each section can be expanded or hidden.

[IMAGE PLACEHOLDER: Accordion with expanded and collapsed items]

Specs

Tokens

Token Description
displayName Display name of the component shown in the structure panel
elements Defines the configuration of accordion items
paddingClass Configures spacing around accordion content with CSS classes
dataTestId Testing hook ID for automated testing
events Configurable event triggers and responses
ON_INIT (Event) Triggered when the accordion is initialized
ON_DESTROY (Event) Triggered when the accordion is removed from the DOM

Structure

  • The accordion is made up of an array of DynamicAccordionItemComponent objects.
  • Each item contains a title that is always visible.
  • Each item also contains content that can be expanded or collapsed.

[IMAGE PLACEHOLDER: Accordion layout showing items with title and expandable content]

Styling

(Configured in Visual 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.
  • 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.

Accordion Visual Properties

Actions & Variants

(Configured in 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.

[IMAGE PLACEHOLDER: Accordion lifecycle with ON_INIT and ON_DESTROY events]

Tests

(Configured in 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.

[IMAGE PLACEHOLDER: Example of component with testing ID shown in inspector]

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]

  • No labels