dhtmlxaccordion:initializing_dhtmlxaccordion [DHX documentation]

Index

dhtmlxaccordion

Basic initialization

A new HTML file and related code files

To start, create a new HTML file and include the dhtmlxAccordion code files in it.

dhtmlxAccordion (as any other DHTMLX component) can be used standalone or as a part of the general library.

If you use dhtmlxAccordion standalone you need to include 4 files:

dhtmlxaccordion_dhx_blue.css;
dhtmlxaccordion.js;
dhtmlxcontainer.js;
dhtmlxcommon.js.

If you use dhtmlxAccordion as a part of the 'dhtmlxSuite' package, you need to include 2 files:

dhtmlx.js;
dhtmlx.css.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Quick start with dhtmlxAccordion</title>
	<script src="../codebase/dhtmlxcommon.js"></script>
	<script src="../codebase/dhtmlxaccordion.js"></script>
        <link rel="STYLESHEET" type="text/css" href="../codebase/skins/dhtmlxaccordion_dhx_blue.css">
	<script src="../codebase/dhtmlxcontainer.js"></script>
</head>
<body>
	<script>
	//here you will place your JavaScript code
	</script>
</body>
</html>

Placing dhtmlxAccordion on a page

On the next step, you should create a DIV container where you then place your accordion.

<div id="box" style="width:300px;height:400px;"></div>

Object constructor

To create a new dhtmlxAccordion object you need to use the next constructor:

var dhxAccord = new dhtmlXAccordion(parentId, skin);

The constructor takes the following parameters:

parentId - an HTML container for dhtmlxAccordion. We created it on the previous step.
skin - (optional) the name of the skin for accordion. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).
Note, if you specify a skin different from the default one, don't forget to include the appropriate dhtmlxAccordion_[name_of_the_skin].css file from the dhtmlxAccordion package to the page.

For our sample accordion we will take an HTML container created on the previous step and the default skin:

var dhxAccord = new dhtmlXAccordion("box");

Adding panes

After you have created an object of dhtmlxAccordion, you can start to add panes to it.

To add a pane to the acccordion, you should use method addItem().

dhxAccord.addItem("a1", "Main Page");
dhxAccord.addItem("a2", "Site Navigation");
dhxAccord.addItem("a3", "Support & Feedback");
dhxAccord.addItem("a4", "Comments");

The full code of the example.
The online sample.
For more configuration options, read article 'Configuration'.
To know how to populate newly-created panes with content, read article 'Content attaching'.

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>