Accordion JAVASCRIPT UI Component API

Accordion Javascript API

Accordion

Accordion organizes content within collapsable items.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

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

Default value

"advanced"

Example

Set the animation property.

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

Set the animation property by using the HTML Element's instance.

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

 accordion.animation = 'simple';

Get the animation property.

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

 let animation = accordion.animation;

dataSource{label: string, content: any}[] | AccordionItem[]

Determines the data source that will be loaded to the Accordion.

Example

Set the dataSource property.

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

Set the dataSource property by using the HTML Element's instance.

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

 accordion.dataSource = null;

Get the dataSource property.

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

 let dataSource = accordion.dataSource;

disabledboolean

Enables or disables the accordion. Disabled elements can not be interacted with.

Default value

false

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

 accordion.disabled = false;

Get the disabled property.

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

 let disabled = accordion.disabled;

expandedIndexesnumber[]

Sets or gets the expanded item indexes. Using this property items can be expanded by passing in their indexes. The number of expanded items is limited by the expandMode.

Example

Set the expandedIndexes property.

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

Set the expandedIndexes property by using the HTML Element's instance.

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

 accordion.expandedIndexes = [2,3];

Get the expandedIndexes property.

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

 let expandedIndexes = accordion.expandedIndexes;

expandMode"single" | "singleFitHeight" | "multiple" | "toggle" | "none"

Sets or gets the expand mode. Expand mode determines how the items will expand or collapse.

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.

Example

Set the expandMode property.

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

Set the expandMode property by using the HTML Element's instance.

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

 accordion.expandMode = 'none';

Get the expandMode property.

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

 let expandMode = accordion.expandMode;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

 accordion.locale = 'fr';

Get the locale property.

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

 let locale = accordion.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

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

Set the localizeFormatFunction property by using the HTML Element's instance.

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

 accordion.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = accordion.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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."

}

Example

Set the messages property.

 <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>

Set the messages property by using the HTML Element's instance.

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

 accordion.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."}};

Get the messages property.

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

 let messages = accordion.messages;

readonlyboolean

Determines if the element is readonly or not. If the element true, users cannot interact with it.

Default value

false

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

 accordion.readonly = true;

Get the readonly property.

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

 let readonly = accordion.readonly;

reorderboolean

Enables or disables accordion reordering.

Default value

false

Try a demo showcasing the reorder property.

Example

Set the reorder property.

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

Set the reorder property by using the HTML Element's instance.

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

 accordion.reorder = false;

Get the reorder property.

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

 let reorder = accordion.reorder;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

 accordion.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = accordion.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

Try a demo showcasing the theme property.

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

 accordion.theme = 'red';

Get the theme property.

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

 let theme = accordion.theme;

unfocusableboolean

Determines whether the element can be focused or not.

Default value

false

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

 accordion.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = accordion.unfocusable;

Events

collapseCustomEvent

This event is triggered when an item is collapsed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

ev.detailObject

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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.

Example

Set up the event handler of collapse event.

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

	// event handling code goes here.
})

collapsingCustomEvent

This event is triggered when an item is going to be collapsed.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onCollapsing

Arguments

evCustomEvent

ev.detailObject

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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 collapsing event.

Example

Set up the event handler of collapsing event.

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

	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when a reordering operation is completed.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.position - The current top and left position of the item that was dragged.

ev.detail.target - The item that was dragged.

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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 dragEnd event.

Example

Set up the event handler of dragEnd event.

const accordion = document.querySelector('smart-accordion');
accordion.addEventListener('dragEnd', function (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.
})

dragStartCustomEvent

This event is triggered when a reordering operation is started.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.position - The current top and left position of the item that is about to be dragged.

ev.detail.target - The item that is about to be dragged.

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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 dragStart event.

Example

Set up the event handler of dragStart event.

const accordion = document.querySelector('smart-accordion');
accordion.addEventListener('dragStart', function (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.
})

expandCustomEvent

This event is triggered when an item is expanded.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

ev.detailObject

ev.detail.position - The current top and left position of the item.

ev.detail.target - The item that was dragged.

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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 expand event.

Example

Set up the event handler of expand event.

const accordion = document.querySelector('smart-accordion');
accordion.addEventListener('expand', function (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.
})

expandingCustomEvent

This event is triggered when an item is going to be expanded.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onExpanding

Arguments

evCustomEvent

ev.detailObject

ev.detail.content - The content of the item.

ev.detail.index - The index of the item.

ev.detail.label - The label of the 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 expanding event.

Example

Set up the event handler of expanding event.

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

	// event handling code goes here.
})

Methods

collapse( position: number): void

Collapses an item at a specified index.

Arguments

positionnumber

The index of the collapsed item.

Invoke the collapse method.

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

Try a demo showcasing the collapse method.

expand( position: number): void

Expands an item at a specified index.

Arguments

positionnumber

The index of the expanded item.

Invoke the expand method.

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

Try a demo showcasing the expand method.

insert( index: number, item: any): void

Inserts a new item at a specified index.

Arguments

indexnumber

The index where the item must be inserted.

itemany

An object containing the values for the properties of the new item to be inserted.

Invoke the insert method.

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

Try a demo showcasing the insert method.

removeAt( position: number): void

Removes an item at a specified index.

Arguments

positionnumber

The index of the item to be removed.

Invoke the removeAt method.

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

Try a demo showcasing the removeAt method.

update( index: number, settings: any): void

Updates an item from the element.

Arguments

indexnumber

The index of the item to be updated.

settingsany

An object containing the values for the properties of the item that will be updated.

Invoke the update method.

const accordion = document.querySelector('smart-accordion');
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

Events

Properties

arrow"left" | "right" | "none"

Sets or gets header's arrow position. If the value is 'none' the arrow is not shown.

Default value

"left"

Example

Set the arrow property.

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

Set the arrow property by using the HTML Element's instance.

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

 accordionitem.arrow = 'none';

Get the arrow property.

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

 let arrow = accordionitem.arrow;

contentstring | HTMLElement

Sets or gets the content if the item.

Default value

Example

Set the content property.

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

Set the content property by using the HTML Element's instance.

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

 accordionitem.content = New Content;

Get the content property.

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

 let content = accordionitem.content;

expandedboolean

Sets or gets the expanded state.

Default value

false

Example

Set the expanded property.

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

Set the expanded property by using the HTML Element's instance.

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

 accordionitem.expanded = false;

Get the expanded property.

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

 let expanded = accordionitem.expanded;

focusedboolean

Sets or gets the focus state.

Default value

false

Example

Set the focused property.

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

Set the focused property by using the HTML Element's instance.

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

 accordionitem.focused = false;

Get the focused property.

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

 let focused = accordionitem.focused;

labelstring

Sets or gets the label if the item.

Default value

Example

Set the label property.

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

Set the label property by using the HTML Element's instance.

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

 accordionitem.label = 'New Label';

Get the label property.

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

 let label = accordionitem.label;

Events

collapseCustomEvent

This event is triggered when the item is collapsed.

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.

Example

Set up the event handler of collapse event.

const accordionitem = document.querySelector('smart-accordion-item');
accordionitem.addEventListener('collapse', function (event) {
	// event handling code goes here.
})

expandCustomEvent

This event is triggered when the item is expanded.

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.

Example

Set up the event handler of expand event.

const accordionitem = document.querySelector('smart-accordion-item');
accordionitem.addEventListener('expand', function (event) {
	// event handling code goes here.
})