Check documentation for the latest version of dhtmlxSuite Manipulating Cells DHTMLX Docs

Manipulating Cells

Adding cells

A new item can be added to accordion with the help of the method addItem():

var item = myAcc.addItem(id, text, open, height, icon);

The parameters of this method are:

  • id - item id
  • text - header text
  • open - true/false - opened/closed on the adding stage
  • height - number, item height (multimode)
  • icon - string, header icon

If the parameter "open" isn't specified, the default behavior is:

  • single mode - true for the 1st item (i.e. opens the 1st added item);
  • multimode - true for all items.

The parameter "height" in the multi mode can have the "*" value (means "auto"). In this case the logic will be the following:

For example, you have a multi mode accordion attached to a window with 3 autoheight cells. When all the cells are expanded, each cell has 1/3 of window's height. When one of them collapsed, each expanded cell will have 1/2 of window's height minus the height of the collapsed cell. If two cells collapsed - the expanded cell will occupy all the available space.

Accessing cells

For working with accordion we need to access its items. To get access to items you should use their ids (the ids that you specified on the addItem() stage).

Items are referred to as cells. Thus, we can access any accordion's item in the following way:

var item = myAcc.cells(id);

The method will return the cell's object.

Setting/getting header text

The header text of an accordion item can be set/changed in this way:


The setText() method takes the only parameter:

  • text - header text of the added item.

Item's header text can be easily received through the method getText():

var text = myAcc.cells(id).getText(); // returns current item's header text

Opening/closing cells

The current active item becomes inactive/closed, when some another item is set active from the page, or from script with the help of the open() method:


The method close() should be used to close (collapse) an accordion's item:


Showing/hiding cells

Any item in the accordion can be easily shown/hidden by means of two corresponding methods (show()/hide()):

Back to top