<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;
var green = "<font color='green'>allow</font>";
var red = "<font color='red'>deny</font>";
function doOnLoad() {
    ta = document.getElementById("ta");
    dhxAccord = new dhtmlXAccordion("accordObj");
    dhxAccord.attachEvent("onBeforeActive", function(itemId) {
        var allow = (!(itemId == "c" || itemId == "d"));
        ta.innerHTML = "Item <b>" + itemId + "</b> was clicked, " + (allow ? green: red) + "<br>" + ta.innerHTML;
        return allow;
    });
    dhxAccord.addItem("a", "a");
    dhxAccord.addItem("b", "b");
    dhxAccord.addItem("c", "c (deny open)");
    dhxAccord.addItem("d", "d (deny open)");
    dhxAccord.openItem("a");
    dhxAccord.setEffect(true);
    //;
    dhxAccord2 = new dhtmlXAccordion("accordObj2");
    dhxAccord2.enableMultiMode(true);
    dhxAccord2.attachEvent("onBeforeActive", function(itemId) {
        var allow = (!(itemId == "g" || itemId == "h"));
        ta.innerHTML = "Item <b>" + itemId + "</b> was clicked, " + (allow ? green: red) + "<br>" + ta.innerHTML;
        return allow;
    });
    dhxAccord2.addItem("e", "e");
    dhxAccord2.addItem("f", "f");
    dhxAccord2.addItem("g", "g (deny open)");
    dhxAccord2.addItem("h", "h (deny close)");
    dhxAccord2.closeItem("g");
    dhxAccord2.setEffect(true);
}</script>