DHTMLX Docs & Samples Explorer

### Skinning

Skin Name | CSS to include
DHX SkyBlue | dhtmlxaccordion_dhx_skyblue.css
DHX Blue | dhtmlxaccordion_dhx_blue.css
DHX Black | dhtmlxaccordion_dhx_black.css
DHX Web | dhtmlxaccordion_dhx_web.css
DHX Terrace | dhtmlxaccordion_dhx_terrace.css

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">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_black.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_web.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_terrace.css">
    <script src="../../codebase/dhtmlxcontainer.js"></script>
    <style>
        td { cursor: default; }
        tr.sep td { font-size: 2px; height: 5px; }
    </style>

    <div id="accordObj" style="width: 320px; height: 400px;"></div>
    <table style="margin-top: 40px; margin-left: 20px;">
    <tr>
        <td align="center"><b>Skin Name</b></td>
        <td align="center"><b>CSS to include</b></td>
    </tr>
    <tr class="sep"><td colspan="2"></td></tr>
    <tr id="tr_dhx_skyblue" onclick="changeSkin('dhx_skyblue');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_skyblue');">DHX SkyBlue</a></td>
        <td>dhtmlxaccordion_dhx_skyblue.css</td>
    </tr>
    <tr id="tr_dhx_blue" onclick="changeSkin('dhx_blue');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_blue');">DHX Blue</a></td>
        <td>dhtmlxaccordion_dhx_blue.css</td>
    </tr>
    <tr id="tr_dhx_black" onclick="changeSkin('dhx_black');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_black');">DHX Black</a></td>
        <td>dhtmlxaccordion_dhx_black.css</td>
    </tr>
    <tr id="tr_dhx_web" onclick="changeSkin('dhx_web');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_web');">DHX Web</a></td>
        <td>dhtmlxaccordion_dhx_web.css</td>
    </tr>
    <tr id="tr_dhx_terrace" onclick="changeSkin('dhx_terrace');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_terrace');">DHX Terrace</a></td>
        <td>dhtmlxaccordion_dhx_terrace.css</td>
    </tr>
    </table>
    <script>var dhxAccord;
    var activeSkin = "dhx_web";
    function doOnLoad() {
        dhxAccord = new dhtmlXAccordion("accordObj", activeSkin);
        // dhxAccord.enableMultiMode(true);
        dhxAccord.addItem("a1", "Measure thrice and cut once");
        dhxAccord.addItem("a2", "My house is my castle");
        dhxAccord.addItem("a3", "Neither fish nor flesh");
        dhxAccord.setIconsPath("../common/");
        dhxAccord.setIcon("a1", "icon1.gif");
        dhxAccord.setIcon("a2", "icon2.gif");
        dhxAccord.setIcon("a3", "icon3.gif");
    }
    function changeSkin(skin) {
        document.getElementById("tr_" + activeSkin).style.backgroundColor = "#FFFFFF";
        activeSkin = skin;
        dhxAccord.unload();
        doOnLoad();
        document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
    }</script>