<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">
<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>
</table>
<script>
var dhxAccord;
var activeSkin = "dhx_skyblue";
function doOnLoad() {
    dhxAccord = new dhtmlXAccordion("accordObj", activeSkin);
    dhxAccord.addItem("a1", "Main Page");
    dhxAccord.addItem("a2", "Site Navigation");
    dhxAccord.addItem("a3", "Support & Feedback");
    dhxAccord.addItem("a4", "Comments");
    dhxAccord.openItem("a1");
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
}
function changeSkin(skin) {
    dhxAccord.setSkin(skin);
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#FFFFFF";
    activeSkin = skin;
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
}</script>