DHTMLX Docs & Samples Explorer

Items Manipulations

Adding Item

A new item can be added to dhtmlxAccordion in the following way:

var item = dhxAccord.addItem(itemId, itemText);

The parameters of this method are:

  • itemId - the id of the added item;
  • itemText - title text of the added item.

A new item, added to the accordion, is always placed under already existing ones and it's always created expanded (collapsing the item that was expanded previously).

Let's add a new item with the id “a1”, and the title text “a” to the Accordion:

dhxAccord.addItem("a1", "a");

Item's Accessing

The following way of items accessing is used for working with dhtmlxAccordion: through Accordion items' ids. All the items in the Accordion have ids that are listed in alphabetical succession starting with “a”. Items are referred to as cells. Thus, we can access any Accordion's item in the following way:

var item = dhxAccord.cells(itemId);

The method will return item's object. So, if you want to access the “a” item - use the next code:

var item = dhxAccord.cells("a");

Setting/Getting Item's Text

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


setText() method takes the only parameter:

  • text - header text of the added item.

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

var text = dhxAccord.cells(itemId).setText(); // returns current item's header text


The method forEachItem() calls a user-defined function for every existing item and passes an item's object into it. It can be useful when you need to apply the same operation to all items.

    // code here
    // or
   function doWithItem(item){
    // code here

For example, you can use setText() method to set the same text for headers of all the items in the Accordion:

   // actions, for example:

Setting/Removing Item's Icon

An icon can be set to any of Accordion items by using the setIcon() method:


In case you want to remove any item's icon - use the clearIcon() method:


Opening/Closing Items

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:


Window's Docking/Item's Undocking

Any item in dhtmlxAccordion can be easily Undocked - extracted from the accordion in order to be displayed separately (in a window). Use the undock() method to undock an item:


An undocked item can be Docked - made a part of the accordion again - by the dock() method:


Showing/Hiding Items

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