Initialization

Initialization

The first steps that need to be made for dhtmlxAccordion's initialization are:

Download the dhtmlxAccordion package from the server and place it in a folder
Create an index.html file
Place the full paths to dhtmlxAccordion's CSS and JS files into the header of the index.html file

<head>
   <script src="[full path to this file]/dhtmlxcommon.js"></script>
   <script src="[full path to this file]/dhtmlxaccordion.js"></script>
   <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxaccordion_dhx_blue.css">
</head>

'dhx_skyblue' is the default skin. If you want to apply another skin - specify path to the appropriate dhtmlxAccordion_[name_of_the_skin].css file from the dhtmlxAccordion package.

New Accordion Object Creation

You need to create an object where dhtmlxAccordion will be placed later. In this example, the object is a <div> element placed in the <body> tag:

<div id="accordObj"></div>

A new Accordion object can be created in the following way:

var dhxAccord = new dhtmlXAccordion(parentId, skin);

parentId - the HTML object of the page to which the accordion is attached (the main accordion container in the code mentioned above).
skin - optional. The name of the skin chosen for the Accordion. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).

So, in our case the code will look like this:

var dhxAccord = new dhtmlXAccordion("accordObj");

Attaching dhtmlxAccordion (Object) to Window

At first, you should download dhtmlxWindows package from the server into the same folder where previously downloaded packages were put. Then, in the <head> tag of the html file, to specify the full path to the following files:

dhtmlxwindows.js;
dhtmlxwindows.css;
dhtmlxwindows_[corresponding_skin_name].css.

<head>
   <script src="[full path to this file]/dhtmlxwindows.js"></script> 
   <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows.css">
   <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows_[corresponding_skin_name].css"> 
</head>

An Accordion object can be attached to any created window on the page. Firstly, you need to create the new base for a set of new windows, a new dhtmlxWindow object for it and set paths for window's image files.

<script>
   var dhxWins = new dhtmlXWindows();
   dhxWins.setImagePath("[full path to this directory]/codebase/imgs/");
   var w1 = dhxWins.createWindow("w1", 10, 10, 320, 360);
</script>

The parameters of the createWindow() method are as follows:

w1 - Window Id;
10,10 - Window position (x & y);
320,360 - Window's width & height.

The window will invoke the base for dhtmlxAccordion and will return the handler for the Accordion object itself. So, you should write only the following line of code:

var dhxAccord = w1.attachAccordion();

Attaching dhtmlxAccordion (Object) to Layout

At first, you should download dhtmlxLayout package from the server into the same folder where previously downloaded packages were put. Then, in the <head> tag of the html file, to specify the full path to the following files:

dhtmlxlayout.js;
dhtmlxlayout.css;
dhtmlxlayout_[corresponding_skin_name].css.

<head>
   <script src="[full path to this file]/dhtmlxlayout.js"></script> 
   <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout.css">
   <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout_[corresponding_skin_name].css"> 
</head>

We need to create an object where dhtmlxLayout will be placed later. In this example, the object is a <div> element, placed in the <body> tag:

<div id="parentId" style="position:absolute; width:600px; height:400px;"></div>

The next step - create a new dhtmlXLayoutObject and place it after the <div> element (object) that we've just created:

var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black");

The second argument in dhtmlXLayoutObject() is the code of the Layout's pattern.

The third argument is optional, and it indicates the name of the skin chosen for the Layout. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).

And only then, you should write the following line of code in order to attach an Accordion to the chosen layout's cell (let it be the first cell “a”):

var dhxAccord = dhxLayout.cells("a").attachAccordion();

Recommended Initialization Way

<head>
  <script>
     var dhxAccord;
     function doOnLoad() {
       dhxAccord = new dhtmlXAccordion();
     }
  </script>
</head>
<body onload="doOnLoad();">
  ...
</body>