Start Building Professional
Web Apps Today

Accordion setEffect(true)

I am having trouble with the Accordion and setEffect(true). When set to false it renders and works correctly. When set to true, all the items, except the first of course, scroll off the visible area at the bottom.

If I do a overflow:auto in the <div> I can scroll down to see the items. When I click on one, the accordion shrinks in height and looks normal, except the scroll bar is still there.

I don't want the overflow:auto there, so I tried to close() the first item. It does but then I can not get an open() call to open any of the items.

The code:

<div id="accordMain" style="width:175px; height:100%;"></div>

MainNavAccordion = new dhtmlXAccordion("accordMain",AccordionsSkin);
MainNavAccordion.setIconsPath("./Themes/Accordion1/");
MainNavAccordion.setEffect(true);
MainNavAccordion.setSizes();

MainNavAccordion.addItem("a1", getText(lblApplications));
MainNavAccordion.addItem("a2", getText(lblWizards));
MainNavAccordion.addItem("a3", getText(lblHelp));

MainNavAccordion.cells("a1").setIcon("applications.png");
MainNavAccordion.cells("a2").setIcon("wizards.png");
MainNavAccordion.cells("a3").setIcon("help.png");

MainNavAccordion.cells("a1").attachObject("a1Guts");
MainNavAccordion.cells("a2").attachObject("a2Guts");
MainNavAccordion.cells("a3").attachObject("a3Guts");


The attached objects are <div>'s with just a few simple links.


MainNavAccordion.cells("a1").close();
MainNavAccordion.cells("a1").open();


The close() works, open() will not for any item.

All works fine on our side.
Whe effect set to true open/close operations take more time as without effect, so you should wait while close will end and the call open.

I got it to work right after I posted this.  I got rid of the .close() line, and moved the .setEffect() line to the end after .open() line.