JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Accordion

The Accordion is a vertically collapsible content panel that displays one or more panels at a time within the available space.

<div id='accordion'/>
<script>
  var accordionObj = new Accordion();
  accordionObj.appendTo('#accordion');
</script>

Properties

animation

AccordionAnimationSettingsModel

Specifies the animation configuration settings for expanding and collapsing the panel.

Defaults to { expand: { effect: ‘SlideDown’, duration: 400, easing: ‘linear’ },collapse: { effect: ‘SlideUp’, duration: 400, easing: ‘linear’ }}

dataSource

Object[]

Specifies the datasource for the accordion items.

Defaults to []

enableHtmlSanitizer

boolean

Specifies whether to enable the rendering of untrusted HTML values in the Accordion component. When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

expandMode

ExpandMode

Specifies the options to expand single or multiple panel at a time. The possible values are:

  • Single: Sets to expand only one Accordion item at a time.
  • Multiple: Sets to expand more than one Accordion item at a time.

Defaults to ‘Multiple’

expandedIndices

number[]

Specifies the expanded items at initial load.

Defaults to []

headerTemplate

string | Function

Specifies the header title template option for accordion items.

Defaults to null

height

string | number

Specifies the height of the Accordion in pixels/number/percentage. Number value is considered as pixels.

Defaults to ‘auto’

itemTemplate

string | Function

Specifies the template option for accordion items.

Defaults to null

items

AccordionItemModel[]

An array of item that is used to specify Accordion items.

  let accordionObj: Accordion = new Accordion( {
       items: [
         { header: 'Accordion Header', content: 'Accordion Content' }]
       });
  accordionObj.appendTo('#accordion');

Defaults to []

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

width

string | number

Specifies the width of the Accordion in pixels/number/percentage. Number value is considered as pixels.

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

addItem

Adds new item to the Accordion with the specified index of the Accordion.

Parameter Type Description
item AccordionItemModel | AccordionItemModel[] | Object | Object[] Item array that is to be added to the Accordion.
index (optional) number Number value that determines where the item should be added.
By default, item is added at the last index if the index is not specified.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

enableItem

Enables/Disables the specified Accordion item.

Parameter Type Description
index number Number value that determines which item should be enabled/disabled.
isEnable boolean Boolean value that determines the action as enable (true) or disable (false).
If the isEnable value is true, the item is enabled or else it is disabled.

Returns void

expandItem

Expands/Collapses the specified Accordion item.

Parameter Type Description
isExpand boolean Boolean value that determines the action as expand or collapse.
index (optional) number Number value that determines which item should be expanded/collapsed.index is optional parameter.
Without Specifying index, based on the isExpand value all Accordion item can be expanded or collapsed.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideItem

Shows or hides the specified item from Accordion.

Parameter Type Description
index number Number value that determines which item should be hidden/shown.
isHidden (optional) boolean Boolean value that determines the action either hide (true) or show (false). Default value is false.
If the isHidden value is false, the item is shown or else item it is hidden.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

removeItem

Dynamically removes item from Accordion.

Parameter Type Description
index number Number value that determines which item should be removed.

Returns void

select

Sets focus to the specified index item header in Accordion.

Parameter Type Description
index number Number value that determines which item should be focused.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

clicked

EmitType<AccordionClickArgs>

The event will be fired while clicking anywhere within the Accordion.

created

EmitType<Event>

The event will be fired once the control rendering is completed.

destroyed

EmitType<Event>

The event will be fired when the control gets destroyed.

expanded

EmitType<ExpandedEventArgs>

The event will be fired after the item gets collapsed/expanded.

expanding

EmitType<ExpandEventArgs>

The event will be fired before the item gets collapsed/expanded.

Previous
Next