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