Accordion — Smart UI JavaScript API

Accordion — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Accordion - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-accordion id="demo-accordion"></smart-accordion>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.accordion.js';

    const el = document.getElementById('demo-accordion');
    if (el) {

      el.dataSource = [
        { label: 'General', content: 'General settings' },
        { label: 'Security', content: 'Security settings' },
        { label: 'Notifications', content: 'Notification settings' }
      ];
      el.expandMode = 'single';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Accordion   Framework: JavaScript   Selector: smart-accordion

API counts: 14 properties, 6 methods, 6 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: collapse(), expand(), insert(), removeAt(), update(), setLocale()

Common events: collapse, collapsing, dragEnd, dragStart, expand, expanding

Module hint: smart-webcomponents/source/modules/smart.accordion.js

Accordion organizes content within collapsable items.

Class

Accordion
AccordionItem

Accordion

Accordion organizes content within collapsable items.

Selector

smart-accordion

Quick picks

dataSourcedisabled

Properties

AanimationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions without animated effects. Setting this property to other supported values enables different animation behaviors.
DdataSourceSpecifies the data source to be loaded and displayed within the Accordion component. This property defines the collection of items or structured data that populates each section or panel of the Accordion, enabling dynamic rendering of its contents. The data source can typically be provided as an array of objects, JSON data, or via a remote endpoint depending on configuration.
DdisabledControls whether the accordion component is enabled or disabled. When set to disabled, all interactive functionality is turned off—users cannot expand, collapse, or interact with any accordion sections. Disabled accordions appear visually inactive to indicate their non-interactive state.
EexpandedIndexesSets or retrieves the indexes of currently expanded items. By assigning an array of item indexes to this property, you can programmatically expand those specific items. The maximum number of items that can be expanded at once depends on the value specified in the expandMode property (for example, single or multiple expansion modes). When getting this property, it returns an array of the indexes of all expanded items.
EexpandModeSets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time.
LlocaleSets or retrieves the current language code (e.g., "en", "fr") for the component. This property works together with the messages property to determine which language-specific messages or translations are displayed. Use this to localize your application content based on user preference or locale.
LlocalizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized message output—such as applying dynamic content, adjusting text structure, or handling language-specific variations—before the messages are delivered to the client application.
MmessagesSpecifies or retrieves an object containing the localized strings used throughout the widget interface. This allows you to define custom translations for various UI elements in different languages. Used together with the locale property to enable localization and internationalization support within the widget.
RreadonlyIndicates whether the element is read-only. When set to true, the element cannot be modified or interacted with by users; its value is fixed and user input is disabled. If false, the element remains editable and interactive.
RreorderControls whether users can reorder accordion items by dragging and dropping them. When enabled, items within the accordion component can be rearranged interactively; when disabled, the order of items remains fixed.
RrightToLeftSpecifies or retrieves a value that determines whether the element is aligned to accommodate right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. This property ensures the element’s layout and text direction are properly adjusted to support RTL localization.
TthemeSpecifies the theme to be applied, which controls the overall appearance and visual style of the element, including aspects such as colors, fonts, and background.
UunfocusableSpecifies whether the element is capable of receiving keyboard focus, allowing users to navigate to it using the keyboard (such as the Tab key) and interact with it through assistive technologies.
UunlockKeyRetrieves or assigns the 'unlockKey' property, which serves as the access credential required to unlock and activate the product's full features.

Events

CcollapseTriggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished.
CcollapsingFires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring.
DdragEndTriggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend).
DdragStartFires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering.
EexpandTriggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction.
EexpandingFires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed.

Methods

CcollapseCollapses the item located at the specified index, hiding its associated content or details from view. This action typically updates the user interface to indicate that the item is no longer expanded.
EexpandExpands the item located at the specified index in the collection, making its detailed content visible or accessible to the user.
IinsertInserts a new item into the array at the specified index, shifting existing elements to the right to accommodate the new entry. If the specified index is out of range, the operation will either append the item to the end or return an error, depending on the implementation.
RremoveAtRemoves the item located at the specified index from the array, shifting subsequent items one position to the left. The array's length is reduced by one, and the removed item is no longer accessible.
SsetLocaleSets the locale of a component.
UupdateReplaces the item at the given index in the collection with an updated version, incorporating the specified new property values while preserving any unchanged properties.

Properties

animationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions without animated effects. Setting this property to other supported values enables different animation behaviors."none" | "simple" | "advanced"

Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions without animated effects. Setting this property to other supported values enables different animation behaviors.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-accordion animation="none"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-accordion');
const animation = el.animation;

dataSourceSpecifies the data source to be loaded and displayed within the Accordion component. This property defines the collection of items or structured data that populates each section or panel of the Accordion, enabling dynamic rendering of its contents. The data source can typically be provided as an array of objects, JSON data, or via a remote endpoint depending on configuration.{label: string, content: any}[] | AccordionItem[]

Specifies the data source to be loaded and displayed within the Accordion component. This property defines the collection of items or structured data that populates each section or panel of the Accordion, enabling dynamic rendering of its contents. The data source can typically be provided as an array of objects, JSON data, or via a remote endpoint depending on configuration.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-accordion data-source="[{ "label": "Item 1", "content": "content 1" }, { "label": "Item 2", "content": "content 2" }, { "label": "Item 3", "content": "content 3" }]"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.dataSource = [{ "label": "Item 1", "content": "content 1" }, { "label": "Item 2", "content": "content 2" }, { "label": "Item 3", "content": "content 3" }];

Read the current value:

const el = document.querySelector('smart-accordion');
const dataSource = el.dataSource;

disabledControls whether the accordion component is enabled or disabled. When set to disabled, all interactive functionality is turned off—users cannot expand, collapse, or interact with any accordion sections. Disabled accordions appear visually inactive to indicate their non-interactive state.boolean

Controls whether the accordion component is enabled or disabled. When set to disabled, all interactive functionality is turned off—users cannot expand, collapse, or interact with any accordion sections. Disabled accordions appear visually inactive to indicate their non-interactive state.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-accordion disabled></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-accordion');
const disabled = el.disabled;

expandedIndexesSets or retrieves the indexes of currently expanded items. By assigning an array of item indexes to this property, you can programmatically expand those specific items. The maximum number of items that can be expanded at once depends on the value specified in the expandMode property (for example, single or multiple expansion modes). When getting this property, it returns an array of the indexes of all expanded items. number[]

Sets or retrieves the indexes of currently expanded items. By assigning an array of item indexes to this property, you can programmatically expand those specific items. The maximum number of items that can be expanded at once depends on the value specified in the expandMode property (for example, single or multiple expansion modes). When getting this property, it returns an array of the indexes of all expanded items.

Examples

Markup and runtime examples for expandedIndexes:

HTML:

<smart-accordion expanded-indexes="[0,1]"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.expandedIndexes = [2,3];

Read the current value:

const el = document.querySelector('smart-accordion');
const expandedIndexes = el.expandedIndexes;

expandModeSets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time."single" | "singleFitHeight" | "multiple" | "toggle" | "none"

Sets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time.

Allowed Values

  • "single" - Allows a single item to be expanded. An item is expanded according to it's content.
  • "singleFitHeight" - Allows a single item to be expanded. An item is expanded in order to fit the remaining space available. If the content of the item overlows, scroll bars will appear inside the item.
  • "multiple" - Multiple items can be expanded. Items expand according to their content.
  • "toggle" - Allows a single item to be expanded and collapsed.
  • "none" - Disables item expanding/collapsing. The current state of the items is preserved.

Default value

"singleFitHeight"
Try a demo showcasing the expandMode property.

Examples

Markup and runtime examples for expandMode:

HTML:

<smart-accordion expand-mode="multiple"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.expandMode = "none";

Read the current value:

const el = document.querySelector('smart-accordion');
const expandMode = el.expandMode;

localeSets or retrieves the current language code (e.g., "en", "fr") for the component. This property works together with the messages property to determine which language-specific messages or translations are displayed. Use this to localize your application content based on user preference or locale.string

Sets or retrieves the current language code (e.g., "en", "fr") for the component. This property works together with the messages property to determine which language-specific messages or translations are displayed. Use this to localize your application content based on user preference or locale.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-accordion locale="de"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-accordion');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized message output—such as applying dynamic content, adjusting text structure, or handling language-specific variations—before the messages are delivered to the client application.function | null

A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized message output—such as applying dynamic content, adjusting text structure, or handling language-specific variations—before the messages are delivered to the client application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-accordion localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-accordion');
const localizeFormatFunction = el.localizeFormatFunction;

messagesSpecifies or retrieves an object containing the localized strings used throughout the widget interface. This allows you to define custom translations for various UI elements in different languages. Used together with the locale property to enable localization and internationalization support within the widget.object

Specifies or retrieves an object containing the localized strings used throughout the widget interface. This allows you to define custom translations for various UI elements in different languages. Used together with the locale property to enable localization and internationalization support within the widget.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"accordionItemRequired": "{{elementType}}: '{{method}}' requires an item from type \"smart-accordion-item\".",

"indexOutOfBound": "{{elementType}}: Out of bound index/indexes in '{{method}}' method.",

"invalidSettings": "{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.",

"noItems": "{{elementType}}: No child elements found.",

"overridingProperties": "{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-accordion messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","accordionItemRequired":"{{elementType}}: '{{method}}' erfordert einen Artikel vom Typ \"smart-accordion-item\".","indexOutOfBound":"{{elementType}}: Nicht gebundener Index / Indizes in Methode '{{method}}'.","invalidSettings":"{{elementType}}: '{{method}}' Die Methode akzeptiert einen string oder ein Objekt als zweiten Parameter.","noItems":"{{elementType}}: Keine untergeordneten Elemente gefunden","overridingProperties":"{{elementType}}: Uberschreiben der Eigenschaften {{property1}} und {{property2}} angewendet. Die Eigenschaft '{{property1}}' wird standardmaessig verwendet."}}"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","accordionItemRequired":"{{elementType}}: '{{method}}' requires an item from type \"smart-accordion-item\".","indexOutOfBound":"{{elementType}}: Out of bound index/indexes in '{{method}}' method.","invalidSettings":"{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.","noItems":"{{elementType}}: No child elements found.","overridingProperties":"{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default."}};

Read the current value:

const el = document.querySelector('smart-accordion');
const messages = el.messages;

readonlyIndicates whether the element is read-only. When set to true, the element cannot be modified or interacted with by users; its value is fixed and user input is disabled. If false, the element remains editable and interactive.boolean

Indicates whether the element is read-only. When set to true, the element cannot be modified or interacted with by users; its value is fixed and user input is disabled. If false, the element remains editable and interactive.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-accordion readonly></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.readonly = true;

Read the current value:

const el = document.querySelector('smart-accordion');
const readonly = el.readonly;

reorderControls whether users can reorder accordion items by dragging and dropping them. When enabled, items within the accordion component can be rearranged interactively; when disabled, the order of items remains fixed.boolean

Controls whether users can reorder accordion items by dragging and dropping them. When enabled, items within the accordion component can be rearranged interactively; when disabled, the order of items remains fixed.

Default value

false
Try a demo showcasing the reorder property.

Examples

Markup and runtime examples for reorder:

HTML attribute:

<smart-accordion reorder></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.reorder = false;

Read the current value:

const el = document.querySelector('smart-accordion');
const reorder = el.reorder;

rightToLeftSpecifies or retrieves a value that determines whether the element is aligned to accommodate right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. This property ensures the element’s layout and text direction are properly adjusted to support RTL localization.boolean

Specifies or retrieves a value that determines whether the element is aligned to accommodate right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. This property ensures the element’s layout and text direction are properly adjusted to support RTL localization.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-accordion right-to-left></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-accordion');
const rightToLeft = el.rightToLeft;

themeSpecifies the theme to be applied, which controls the overall appearance and visual style of the element, including aspects such as colors, fonts, and background.string

Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including aspects such as colors, fonts, and background.

Default value

""
Try a demo showcasing the theme property.

Examples

Markup and runtime examples for theme:

HTML:

<smart-accordion theme="blue"></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-accordion');
const theme = el.theme;

unfocusableSpecifies whether the element is capable of receiving keyboard focus, allowing users to navigate to it using the keyboard (such as the Tab key) and interact with it through assistive technologies.boolean

Specifies whether the element is capable of receiving keyboard focus, allowing users to navigate to it using the keyboard (such as the Tab key) and interact with it through assistive technologies.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-accordion unfocusable></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-accordion');
const unfocusable = el.unfocusable;

unlockKeyRetrieves or assigns the 'unlockKey' property, which serves as the access credential required to unlock and activate the product's full features.string

Retrieves or assigns the 'unlockKey' property, which serves as the access credential required to unlock and activate the product's full features.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-accordion unlock-key=""></smart-accordion>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-accordion');
const unlockKey = el.unlockKey;

Events

collapseTriggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished.CustomEvent

Triggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCollapse

Arguments

evCustomEvent
ev.detailObject
ev.detail.content - The collapsed item's content.
ev.detail.index - The index of the collapsed item.
ev.detail.label - The label of the collapsed item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the collapse event.

Examples

Listen for collapse using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('collapse', (event) => {
    const detail = event.detail,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

collapsingFires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring.CustomEvent

Fires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onCollapsing

Arguments

evCustomEvent
ev.detailObject
ev.detail.content - The item content.
ev.detail.index - The item's index.
ev.detail.label - The item's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the collapsing event.

Examples

Listen for collapsing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('collapsing', (event) => {
    const detail = event.detail,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

dragEndTriggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend).CustomEvent

Triggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend).

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - Current top and left coordinates of the dragged item.
ev.detail.target - The dragged item element.
ev.detail.content - The dragged item's content.
ev.detail.index - The dragged item's index.
ev.detail.label - The dragged item's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the dragEnd event.

Examples

Listen for dragEnd using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('dragEnd', (event) => {
    const detail = event.detail,
        position = detail.position,
        target = detail.target,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

dragStartFires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering.CustomEvent

Fires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - Initial top and left coordinates of the item being dragged.
ev.detail.target - The item element being dragged.
ev.detail.content - The dragged item's content.
ev.detail.index - The dragged item's index.
ev.detail.label - The dragged item's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the dragStart event.

Examples

Listen for dragStart using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('dragStart', (event) => {
    const detail = event.detail,
        position = detail.position,
        target = detail.target,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

expandTriggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction.CustomEvent

Triggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onExpand

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - Current top and left coordinates of the expanded item.
ev.detail.target - The expanded item element.
ev.detail.content - The expanded item's content.
ev.detail.index - The expanded item's index.
ev.detail.label - The expanded item's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the expand event.

Examples

Listen for expand using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('expand', (event) => {
    const detail = event.detail,
        position = detail.position,
        target = detail.target,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

expandingFires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed.CustomEvent

Fires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onExpanding

Arguments

evCustomEvent
ev.detailObject
ev.detail.content - The content of the item being expanded.
ev.detail.index - The index of the item being expanded.
ev.detail.label - The label of the item being expanded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the expanding event.

Examples

Listen for expanding using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion')?.addEventListener('expanding', (event) => {
    const detail = event.detail,
        content = detail.content,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

Methods

collapse( position: number): voidCollapses the item located at the specified index, hiding its associated content or details from view. This action typically updates the user interface to indicate that the item is no longer expanded.

Collapses the item located at the specified index, hiding its associated content or details from view. This action typically updates the user interface to indicate that the item is no longer expanded.

Arguments

positionnumber

Index of the item to collapse.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.collapse(0);

Try a demo showcasing the collapse method.

expand( position: number): voidExpands the item located at the specified index in the collection, making its detailed content visible or accessible to the user.

Expands the item located at the specified index in the collection, making its detailed content visible or accessible to the user.

Arguments

positionnumber

Index of the item to expand.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.expand(0);

Try a demo showcasing the expand method.

insert( index: number, item: any): voidInserts a new item into the array at the specified index, shifting existing elements to the right to accommodate the new entry. If the specified index is out of range, the operation will either append the item to the end or return an error, depending on the implementation.

Inserts a new item into the array at the specified index, shifting existing elements to the right to accommodate the new entry. If the specified index is out of range, the operation will either append the item to the end or return an error, depending on the implementation.

Arguments

indexnumber

Index where the new item will be inserted.

itemany

Object representing the new item's properties.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.insert("0, {\"label\":\"New item\",\"content\":\"New item content\" }");

Try a demo showcasing the insert method.

removeAt( position: number): voidRemoves the item located at the specified index from the array, shifting subsequent items one position to the left. The array's length is reduced by one, and the removed item is no longer accessible.

Removes the item located at the specified index from the array, shifting subsequent items one position to the left. The array's length is reduced by one, and the removed item is no longer accessible.

Arguments

positionnumber

Index of the item to remove.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.removeAt("0");

Try a demo showcasing the removeAt method.

setLocale( locale: string, messages?: any): voidSets the locale of a component.

Sets the locale of a component.

Arguments

localestring

The locale abbreviation. For example: 'de'.

messages?any

Object containing the locale messages.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.setLocale("'de'");

update( index: number, settings: any): voidReplaces the item at the given index in the collection with an updated version, incorporating the specified new property values while preserving any unchanged properties.

Replaces the item at the given index in the collection with an updated version, incorporating the specified new property values while preserving any unchanged properties.

Arguments

indexnumber

Index of the item to update.

settingsany

Object containing updated property values for the item.

On the custom element in the DOM (narrow the selector, e.g. to #my-accordion, if you host multiple widgets):

document.querySelector('smart-accordion')?.update("0, {\"label\":\"Updated item\",\"content\":\"Updated item content\" }");

Try a demo showcasing the update method.

CSS Variables

--smart-accordion-animation-durationvar()

Default value

"225ms"

smartAccordion animation duration

--smart-accordion-default-widthvar()

Default value

"var(--smart-box-width)"

smartAccordion default width

--smart-accordion-default-heightvar()

Default value

"var(--smart-box-height)"

smartAccordion default height

--smart-accordion-expanded-content-heightvar()

Default value

"0px"

Determines expanded content's height

--smart-accordion-expanded-content-local-heightvar()

Default value

"0px"

The height of an expanded item content part. Calculated dynamically for each item. Used in all modes except 'singleFitHeight'.

--smart-accordion-item-header-heightvar()

Default value

"var(--smart-bar-height)"

Element's header height. Used in several calcilations related to items height.

--smart-accordion-item-expanded-offsetvar()

Default value

"20px"

An offset below each expanded accordion item.

AccordionItem

Single item in an Accordion view.

Selector

smart-accordion-item

Properties

AarrowSpecifies or retrieves the position of the arrow indicator within the header. Accepts values such as 'left', 'right', or 'none'. When set to 'none', the arrow will not be displayed in the header.
CcontentSets or retrieves the content of the item. Use this property to assign new content to the item or to access its current content value.
EexpandedGets or sets whether the element is in its expanded or collapsed state. When set to true, the element is expanded and its content is visible; when false, the element is collapsed and its content is hidden.
FfocusedGets or sets whether the element currently has input focus. When set to true, the element receives focus; when set to false, the element loses focus. This property reflects the element's current focus state within the user interface.
LlabelSets or retrieves the label of the item. This property allows you to assign a descriptive name to the item or access its current label.

Events

CcollapseThis event is triggered whenever the item transitions from an expanded to a collapsed state, typically as a result of user interaction or a programmatic action. Use this event to execute custom logic or update the UI when the item is hidden or minimized.
EexpandThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It typically occurs after the expansion animation or transition is complete, indicating that the item is now fully visible. Use this event to perform actions that should only occur once the item has been expanded, such as loading related data or updating the user interface.

Properties

arrowSpecifies or retrieves the position of the arrow indicator within the header. Accepts values such as 'left', 'right', or 'none'. When set to 'none', the arrow will not be displayed in the header."left" | "right" | "none"

Specifies or retrieves the position of the arrow indicator within the header. Accepts values such as 'left', 'right', or 'none'. When set to 'none', the arrow will not be displayed in the header.

Default value

"left"

Examples

Markup and runtime examples for arrow:

HTML:

<smart-accordion-item arrow="right"></smart-accordion-item>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion-item');
el.arrow = "none";

Read the current value:

const el = document.querySelector('smart-accordion-item');
const arrow = el.arrow;

contentSets or retrieves the content of the item. Use this property to assign new content to the item or to access its current content value.string | HTMLElement

Sets or retrieves the content of the item. Use this property to assign new content to the item or to access its current content value.

Default value

''

Examples

Markup and runtime examples for content:

HTML:

<smart-accordion-item content="Content"></smart-accordion-item>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion-item');
el.content = "New Content";

Read the current value:

const el = document.querySelector('smart-accordion-item');
const content = el.content;

expandedGets or sets whether the element is in its expanded or collapsed state. When set to true, the element is expanded and its content is visible; when false, the element is collapsed and its content is hidden.boolean

Gets or sets whether the element is in its expanded or collapsed state. When set to true, the element is expanded and its content is visible; when false, the element is collapsed and its content is hidden.

Default value

false

Examples

Markup and runtime examples for expanded:

HTML attribute:

<smart-accordion-item expanded></smart-accordion-item>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion-item');
el.expanded = false;

Read the current value:

const el = document.querySelector('smart-accordion-item');
const expanded = el.expanded;

focusedGets or sets whether the element currently has input focus. When set to true, the element receives focus; when set to false, the element loses focus. This property reflects the element's current focus state within the user interface.boolean

Gets or sets whether the element currently has input focus. When set to true, the element receives focus; when set to false, the element loses focus. This property reflects the element's current focus state within the user interface.

Default value

false

Examples

Markup and runtime examples for focused:

HTML attribute:

<smart-accordion-item focused></smart-accordion-item>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion-item');
el.focused = false;

Read the current value:

const el = document.querySelector('smart-accordion-item');
const focused = el.focused;

labelSets or retrieves the label of the item. This property allows you to assign a descriptive name to the item or access its current label.string

Sets or retrieves the label of the item. This property allows you to assign a descriptive name to the item or access its current label.

Default value

""

Examples

Markup and runtime examples for label:

HTML:

<smart-accordion-item label="Label"></smart-accordion-item>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-accordion-item');
el.label = "New Label";

Read the current value:

const el = document.querySelector('smart-accordion-item');
const label = el.label;

Events

collapseThis event is triggered whenever the item transitions from an expanded to a collapsed state, typically as a result of user interaction or a programmatic action. Use this event to execute custom logic or update the UI when the item is hidden or minimized.CustomEvent

This event is triggered whenever the item transitions from an expanded to a collapsed state, typically as a result of user interaction or a programmatic action. Use this event to execute custom logic or update the UI when the item is hidden or minimized.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCollapse

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for collapse using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion-item')?.addEventListener('collapse', (event) => {
	// event handling code goes here.
})

expandThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It typically occurs after the expansion animation or transition is complete, indicating that the item is now fully visible. Use this event to perform actions that should only occur once the item has been expanded, such as loading related data or updating the user interface.CustomEvent

This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It typically occurs after the expansion animation or transition is complete, indicating that the item is now fully visible. Use this event to perform actions that should only occur once the item has been expanded, such as loading related data or updating the user interface.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onExpand

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for expand using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-accordion-item')?.addEventListener('expand', (event) => {
	// event handling code goes here.
})