<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>
 
<table>
<tr>
    <td style="padding-right: 10px;"><div id="accordObj" style="position: relative; width: 320px; height: 400px;"></div></td>
    <td><div id="accordObj2" style="position: relative; width: 320px; height: 400px;"></div></td>
</tr>
</table>
<div id="ta" style="position: relative; width: 320px; margin-top: 20px; height: 100px; overflow: auto;"></div>
<script>
var ta,
dhxAccord,
dhxAccord2;
function doOnLoad() {
    ta = document.getElementById("ta");
    dhxAccord = new dhtmlXAccordion("accordObj");
    dhxAccord.attachEvent("onActive", function(itemId) {
        ta.innerHTML = "Item <b>" + dhxAccord.cells(itemId).getText() + "</b> was activated<br>" + ta.innerHTML;
    });
    dhxAccord.addItem("a1", "a");
    dhxAccord.addItem("a2", "b");
    dhxAccord.addItem("a3", "c");
    dhxAccord.openItem("a1");
    dhxAccord.setEffect(true);
    dhxAccord2 = new dhtmlXAccordion("accordObj2");
    dhxAccord2.enableMultiMode(true);
    dhxAccord2.attachEvent("onActive", function(itemId, state) {
        ta.innerHTML = "Item <b>" + dhxAccord2.cells(itemId).getText() + "</b> was " + (state ? "": "de") + "activated<br>" + ta.innerHTML;
    });
    dhxAccord2.addItem("a1", "d");
    dhxAccord2.addItem("a2", "e");
    dhxAccord2.addItem("a3", "f");
    dhxAccord2.forEachItem(function(item) {
        item.setHeight(item.getId() == "a1" ? 134: 133);
    });
    dhxAccord2.setEffect(true);
}</script>