Initializing Accordion on a Page

Accordion source files

To start working with dhtmlxAccordion, you need to include accordion js/css files on a page.

In order to use dhtmlxAccordion as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxaccordion.css">
    <script src="codebase/dhtmlxaccordion.js"></script>
</head>

If you use dhtmlxAccordion as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxaccordion js/css files are parts of dhtmlx js/css correspondingly, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Accordion object.

var myAcc = new dhtmlXAccordion({
 
    parent:     "accObj",       // id/object, parent container for accordion
    icons_path: "../icons/",    // string, path to icons, optional
    skin:       "dhx_skyblue",  // string, accordion's skin, optional
    multi_mode: true,           // boolean, true to enable multimode
    dnd:        true,           // boolean, true to enable drag-n-drop
 
    items: [    // accordion cells section
        {
            id:     "a1",       // item id, required
            text:   "Text",     // string, header's text (html allowed)
            icon:   "icon.png", // string, header's icon, optional
            open:   true,       // boolean, true to open/false to close item on init
            height: 200         // number, cell's height (multimode only)
        },
        {...},  // other items
        {...}
    ]
 
});
 
// old way
var myAcc = new dhtmlXAccordion(parent, skin);
 
// where:
parentId    // id/object, a parent container where layout will be located
skin        // string, optional, "dhx_skyblue", "dhx_web", "dhx_terrace"

Full-screen init

Generally, to create a full-screen accordion on a page, use the code as in:

<html>
<head>
<style>    /* it's important to set width/height to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }
</style>
<script>    var myAcc;
    function doOnLoad() {
        myAcc = new dhtmlXAccordion({
            parent: document.body,  // parent container
            items: [...]            // accordion's cells and other config
        });
    }
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>

If you need, you can set offsets for Accordion in the full screen mode.

Init in an HTML element

To initialize dhtmlxAccordion in an HTML element, do the following:

1) create an HTML element where the accordion will be placed later, don't forget to specify its width and height:

<div id="accObj" style="position: relative; width: 360px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlXAccordion object and place it into the HTML object that you've just created:

var myAcc = new dhtmlXAccordion({
    parent: "accObj",   // id or object for parent container
    items: [...]        // accordion's cells and other config
});
//or
var myAcc = new dhtmlXAccordion({
    parent: document.getElementById("accObj"),
    items: [...]
});
// old way still works
var myAcc = new dhtmlXAccordion("accObj");

Init in a window

To create an accordion in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var accWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

w1 - the id of the window;
20, 20 - the left and the top positions of the window;
600, 400 - the width and the height of the window.

2) call the attachAccordion method to render an accordion in the window:

var myAcc = new accWin.attachAccordion();
// or using a more extended config
var myAcc = new accWin.attachAccordion({
    items: [...]
});

Init in a cell of layout

To create a new accordion in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach accordion to a cell of the layout with the attachAccordion method:

var myAcc = myLayout.cells("a").attachAccordion();
// or using a more extended config
var myAcc = myLayout.cells("a").attachAccordion({
    items: [...]
});

Recommended init way

<html>
<head>
<script>    var myAcc;
    function doOnLoad() {
        myAcc = new dhtmlXAccordion({
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>