Items Manipulations

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.

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

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");

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

dhxAccord.cells(itemId).setText(text);

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.

<script>
   dhxAccord.forEachItem(function(item){
    // code here
   });
    // or
   function doWithItem(item){
    // code here
   });
   dhxAccord.forEachItem(doWithItem);
</script>

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

<script>
   dhxAccord.forEachItem(function(item){
   // actions, for example:
   item.setText("newText");
   });
</script>

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

dhxAccord.cells(itemId).setIcon(icon);

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

dhxAccord.cells(itemId).clearIcon();

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:

dhxAccord.cells(itemId).open();

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

dhxAccord.cells(itemId).close();

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:

dhxAccord.cells(itemId).undock();

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

dhxAccord.cells(itemId).dock();

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

<script>
   dhxAccord.cells(itemId).show();
   dhxAccord.cells(itemId).hide();
</script>