DHTMLX Docs & Samples Explorer

### Event onActive

Source

    <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>