How to do Multiple Accordion Objects without DHTMLXLayout

I am new to this library and this forum… I have a simple need to do 2 Accordion objects in different areas on the HTML page.

For example, I need a left nav type accordion and a content type accordion on the right. I do not want to use the DHTMLX Layout because I don’t want that functionality. I just want 2 separate accordion objects behaving independent of one an other.

Can anyone please help? I’m a newbie and want to know if its possible with this library without writing major javascript code to make it work.

Please advise,
Craig :slight_smile:

There can be any number of accordions on the page:

Hi Alexandra,

Thank you for the quick reply… I used that code and it worked perfectly. However, when I try to apply the Attach Object function I get an error. Here is what my code looks like:

<div id="accordObj1" style="position: relative; width: 225px; height: 400px;">
        	<div id="objId1">Test</div>
             <div id="objId2">Test again</div>
<div id="accordObj2" style="position: relative; width: 225px; height: 400px;">
             <div id="objId1">Test2</div>
             <div id="objId2">Test2 again</div>
dhxAccord1 = new dhtmlXAccordion("accordObj1");
dhxAccord1.addItem("a1", "Main Page");
dhxAccord1.addItem("a2", "Site Navigation");

dhxAccord2 = new dhtmlXAccordion("accordObj2");
dhxAccord2.addItem("a1", "Main Page");
dhxAccord2.addItem("a2", "Site Navigation");


Can you tell me what I am missing? Or what I am doing wrong?

Any help would be greatly appreciated.


Hi Craig,

an object can be attached only once. And objects must have unique ids:


Test again
Test2 again

Hi Alexandra,

I actually figured it out. Thanks for all of your help. You were right, objects needed unique ids. That is what was causing my problem.