Configuration

The following predefined skins are available for dhtmlxAccordion users:

• dhx_skyblue
• dhx_web
  
  

You have the possibility to add an icon to the pane header before the text label.

To add an icon to a pane you should:

1. Call method setIconsPath(path) to set the path to the folder with icon(s);
2. Call method setIcon(pane,icon) to assign the desired icon to the pane.

dhxAccord = new dhtmlXAccordion("box");
 
dhxAccord.setIconsPath("../common/");
dhxAccord.addItem("a1", "a");// parameters: the pane id and the header text
dhxAccord.setIcon("a1", "icon1.gif");//parameters: the pane id and the name of an icon

Related sample - Icons manipulations.

If you place dhtmlxAccordion into one of DHTMLX container components such as dhtmlxLayout or dhtmxlWindow, it will take the size of the parent container automatically and each time the size of the parent container is changed, the accordion will adjust to it.

But if you use a regular HTML container (e.g. some DIV), the accordion won't take new dimensions after you change the size of the container. To adjust the accordion to the new dimensions you will need to call a special method - setSizes().

<div id="box" style="width: 300px; height: 500px;"> </div>// the DIV container
var dhxAccord = new dhtmlXAccordionObject("myAcc");// dhtmlxAccordion object
 
//changing the size of the parent container
var parentObj = document.getElementById("box");
parentObj.style.width = "250px";
parentObj.style.height = "400px";
 
dhxAccord.setSizes();//adjusting the accordion to the new size

This method doesn't take any input parameters and adjusts dhtmlxAccordion object to the size of the parent container.

The effect in dhtmlxAccordion is noticeable smoothness of Accordion items expanding/collapsing. If it's set, the smoothness is clearly visible when the component's items are being expanded/collapsed. It can be defined by means of setEffect() method:

dhxAccord.setEffect(true|false);

This method is set to false by default. This means that initially there is no any noticeable effect in the process of items expanding/collapsing. The parameter should be set to true if you want to switch this effect on.