Ej1 api migration in EJ2 JavaScript Accordion control

6 May 202516 minutes to read

This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2.

Accessibility

Behavior API in Essential® JS 1 API in Essential® JS 2
Keyboard Navigation Property: allowKeyboardNavigation

$(“#accordion”).ejAccordion({
  allowKeyboardNavigation: false
});
Not Applicable
Localization Not Applicable Property: locale

var accordion = new ej.navigations.Accordion({
  locale: ‘en-US’
});
accordion.appendTo(‘#ej2Accordion’);
RTL Property: enableRTL

$(“#accordion”).ejAccordion({
  enableRTL: false
});
Property: enableRtl

var accordion = new ej.navigations.Accordion({
  enableRtl: false
});
accordion.appendTo(‘#ej2Accordion’);

AjaxSettings

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ajaxSettings

$(“#accordion”).ejAccordion({
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
Asynchronous Property: ajaxSettings.async

$(“#accordion”).ejAccordion({
  ajaxSettings: { async: true }
});
Not Applicable
Browser Cache Property: ajaxSettings.cache

$(“#accordion”).ejAccordion({
  ajaxSettings: { cache: false }
});
Not Applicable
Request type Property: ajaxSettings.contentType

$(“#accordion”).ejAccordion({
  ajaxSettings: { contentType: “html” }
});
Not Applicable
Data Property: ajaxSettings.data

$(“#accordion”).ejAccordion({
  ajaxSettings: { data: {} }
});
Not Applicable
Response type Property: ajaxSettings.dataType

$(“#accordion”).ejAccordion({
  ajaxSettings: { dataType: “html” }
});
Not Applicable
HTTP request type Property: ajaxSettings.type

$(“#accordion”).ejAccordion({
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
AjaxBeforeLoad Event: ajaxBeforeLoad

$(“#accordion”).ejAccordion({
  ajaxBeforeLoad: function(args) {}
});
Not Applicable
AjaxError Event: ajaxError

$(“#accordion”).ejAccordion({
  ajaxError: function(args) {}
});
Not Applicable
AjaxLoad Event: ajaxLoad

$(“#accordion”).ejAccordion({
  ajaxLoad: function(args) {}
});
Not Applicable
AjaxSuccess Event: ajaxSuccess

$(“#accordion”).ejAccordion({
  ajaxSuccess: function(args) {}
});
Not Applicable

Animation

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Not Applicable Property: animation

var accordion = new ej.navigations.Accordion({
  animation: { expand: { }, collapse: { } }
});
accordion.appendTo(‘#ej2Accordion’);
EnableAnimation Property: enableAnimation

$(“#accordion”).ejAccordion({
  enableAnimation: false
});
Not Applicable
Expand animation Not Applicable Property: animation.expand

var accordion = new ej.navigations.Accordion({
  animation: {
    expand: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Collapse animation Not Applicable Property: animation.collapse

var accordion = new ej.navigations.Accordion({
  animation: {
    collapse: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Duration
[expand / collapse]		 Not Applicable Property: animation.collapse.duration

var accordion = new ej.navigations.Accordion({
  animation: {
    expand: { duration: 400 }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Easing
[expand / collapse]		 Not Applicable Property: animation.collapse.easing

var accordion = new ej.navigations.Accordion({
  animation: {
    expand: { easing: ‘ease-in’ }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Effect
[expand / collapse]		 Not Applicable Property: animation.collapse.effect

var accordion = new ej.navigations.Accordion({
  animation: {
    expand: { effect: ‘SlideLeft’ }
  }
});
accordion.appendTo(‘#ej2Accordion’);

Items

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Not Applicable Property: items

var accordion = new ej.navigations.Accordion({
  items: []
});
accordion.appendTo(‘#ej2Accordion’);
Content Not Applicable Property: items[0].content

var accordion = new ej.navigations.Accordion({
  items: [{ content: ‘Contents’ }]
});
accordion.appendTo(‘#ej2Accordion’);
Custom class Not Applicable Property: items[0].cssClass

var accordion = new ej.navigations.Accordion({
  items: [{ cssClass: ‘customClass’ }]
});
accordion.appendTo(‘#ej2Accordion’);
Header Not Applicable Property: items[0].header

var accordion = new ej.navigations.Accordion({
  items: [{ header: ‘Header1’ }]
});
accordion.appendTo(‘#ej2Accordion’);
HeaderSize Property: headerSize

$(“#accordion”).ejAccordion({
  headerSize: ‘50px’
});
Not Applicable
Icon class Not Applicable Property: items[0].iconCss

var accordion = new ej.navigations.Accordion({
  items: [{ iconCss: ‘e-icons’ }]
});
accordion.appendTo(‘#ej2Accordion’);
IsExpand Not Applicable Property: items[0].expanded

var accordion = new ej.navigations.Accordion({
  items: [{ expanded: true }]
});
accordion.appendTo(‘#ej2Accordion’);
Collapse Item Method: collapsePanel(index)

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.collapsePanel(0);
Method: expandItem(index, false)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.expandItem(0, false);
Expand Item Method: expandPanel(index)

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.expandPanel(0);
Method: expandItem(index, true)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.expandItem(0, true);
CollapseAll Method: collapseAll()

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.collapseAll();
Not Applicable
ExpandAll Method: expandAll()

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.expandAll();
Not Applicable
Get ItemsCount Method: getItemsCount()

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.getItemsCount();
Not Applicable
AddItem Method: addItem(text, content, index)

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.addItem(“New item”, “The accordion content”, 2);
Method: addItem(items, index)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.addItem([{ header: ‘App’, content: ‘text’ }], 0)
Remove Item Method: removeItem(index)

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.removeItem(0);
Method: removeItem(index)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.removeItem(0)
Disable Items Property: disablesItems

$(“#accordion”).ejTab({
  disabledItems: [0, 1]
});
Not Applicable
Enable Items Property: enabledItems

$(“#accordion”).ejTab({
  enabledItems: [0, 1]
});
Not Applicable
Disable Item Method: disableItems([index])

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.disableItems([1]);
Method: enableItem(index, false)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.enableItem(0, false)
Enable Item Method: enableItems([index])

$(“#accordion”).ejTab();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.enableItems([1]);
Method: enableItem(index, true)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.enableItem(0, true)
Hide Item Not Applicable Method: hideItem(index, true)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.hideItem(0, true)
SelectedItemIndex Property: selectedItemIndex

$(“#accordion”).ejAccordion({
  selectedItemIndex: false
});
Not Applicable
Select Not Applicable Method: select(index)

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.select(0)
BeforeActivate Event: beforeActivate

$(“#accordion”).ejAccordion({
  beforeActivate: function(args) {}
});
Event: expanding

var accordion = new ej.navigations.Accordion({
  expanding: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
Activate Event: activate

$(“#accordion”).ejAccordion({
  activate: function(args) {}
});
Event: expanded

var accordion = new ej.navigations.Accordion({
  expanded: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
beforeInActivate Event: beforeInactivate

$(“#accordion”).ejAccordion({
  beforeInactivate: function(args) {}
});
Not Applicable
InActive Event: inActivate

$(“#accordion”).ejAccordion({
  inActivate: function(args) {}
});
Not Applicable
Clicked Not Applicable Event: clicked

var accordion = new ej.navigations.Accordion({
  clicked: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Collapsible Property: collapsible

$(“#accordion”).ejAccordion({
  collapsible: false
});
Not Applicable
Collapse speed Property: collapseSpeed

$(“#accordion”).ejAccordion({
  collapseSpeed: 500
});
Not Applicable
Custom class Property: cssClass

$(“#accordion”).ejAccordion({
  cssClass: ‘custom’
});
Not Applicable
CustomIcon class Property: customIcon

$(“#accordion”).ejAccordion({
  customIcon: {
    header: “header-close”,
    selectedHeader: “header-expand”
  }
});
Not Applicable
Enabled Property: enabled

$(“#accordion”).ejAccordion({
  enabled: false
});
Not Applicable
Events Property: events

$(“#accordion”).ejAccordion({
  events: “mouseover”
});
Not Applicable
Expand speed Property: expandSpeed

$(“#accordion”).ejAccordion({
  expandSpeed: 300
});
Not Applicable
Height Property: height

$(“#accordion”).ejAccordion({
  height: 400
});
Property: height

var accordion = new ej.navigations.Accordion({
  height: 700
});
accordion.appendTo(‘#ej2Accordion’);
HeightAdjustMode Property: heightAdjustMode

$(“#accordion”).ejAccordion({
  heightAdjustMode: “content”
});
Not Applicable
HtmlAttributes Property: htmlAttributes

$(“#accordion”).ejAccordion({
  htmlAttributes: { title: “Demo” }
});
Not Applicable
MultipleOpen Property: enableMultipleOpen

$(“#accordion”).ejAccordion({
  enableMultipleOpen: true
});
Property: expandMode

var accordion = new ej.navigations.Accordion({
  expandMode: ‘Multiple’
});
accordion.appendTo(‘#ej2Accordion’);
Persistence Property: enablePersistence

$(“#accordion”).ejAccordion({
  enablePersistence: false
});
Property: enablePersistence

var accordion = new ej.navigations.Accordion({
  enablePersistence: true
});
accordion.appendTo(‘#ej2Accordion’);
ShowRounderCorner Property: showRoundedCorner

$(“#accordion”).ejAccordion({
  showRoundedCorner: false
});
Not Applicable
Width Property: width

$(“#accordion”).ejAccordion({
  width: 600
});
Property: width

var accordion = new ej.navigations.Accordion({
  width: 500
});
accordion.appendTo(‘#ej2Accordion’);
Enable Method: enable()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.enable();
Not Applicable
Disable Method: disable()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.disable();
Not Applicable
Show Method: show()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.show();
Not Applicable
Hide Method: hide()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.hide();
Not Applicable
Destroy Method: destroy()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.destroy();
Method: destroy()

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.destroy();
Refresh Method: refresh()

$(“#accordion”).ejAccordion();
var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.refresh();
Method: refresh()

var accordion = new ej.navigations.Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.refresh();
Created Event: create

$(“#accordion”).ejAccordion({
  create: function(args) {}
});
Event: created

var accordion = new ej.navigations.Accordion({
  created: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
Destroyed Event: destroy

$(“#accordion”).ejAccordion({
  destroy: function(args) {}
});
Event: destroyed

var accordion = new ej.navigations.Accordion({
  destroyed: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);