<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div id="accordObj" style="position: relative; width: 320px; height: 400px;"></div>
<div style="margin: 50px 0px 20px 0px;">
Select Item <select id="sel1"></select>
Select Icon <select id="sel2"><option value="icon1.gif">icon1.gif</option><option value="icon2.gif">icon2.gif</option><option value="icon3.gif">icon3.gif</option></select>
<input type="button" value="Set Icon" onclick="setIcon();">
<input type="button" value="Clear Icon" onclick="clearIcon();">
</div>
<script>
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var dhxAccord;
function init() {
    dhxAccord = new dhtmlXAccordion("accordObj");
    dhxAccord.setIconsPath("../common/");
    dhxAccord.addItem("a1", "a");
    dhxAccord.addItem("a2", "b");
    dhxAccord.addItem("a3", "c");
    dhxAccord.openItem("a1");
    dhxAccord.setIcon("a1", "icon1.gif");
    dhxAccord.setIcon("a2", "icon2.gif");
    dhxAccord.setIcon("a3", "icon3.gif");
    dhxAccord.forEachItem(function(item) {
        sel1.options.add(new Option(item.getText(), item.getId()));
    });
}
function getId() {
    var id = sel1.options[sel1.selectedIndex].value;
    return id;
}
function getIcon() {
    var icon = sel2.options[sel2.selectedIndex].value;
    return icon;
}
function setIcon() {
    dhxAccord.cells(getId()).setIcon(getIcon());
}
function clearIcon() {
    dhxAccord.cells(getId()).clearIcon();
}</script>