As you may already know, DHTML Menu Builder can create collapsible menus with the aid of the CollapsibleMenus AddIn. But, since the introduction of the "Free Flow" positioning method, more and more AddIns have become deprecated due to the versatility that this feature brings to DHTML Menu Builder.

Here you can see a simple collapsible menu created using "Free Flow" (to control the position of the toolbars) and the "Visibility Condition" to control the visible/hidden state of the toolbars.

How does it work? This AddIn-less approach is not as powerful as the CollapsibleMenus AddIn but it does demonstrate the versatility and power of the features currently available in DHTML Menu Builder 4.

Basically, this is nothing more than a multiple-toolbar project where the visibility of some toolbars is controlled by dynamically changing their "Visibility Condition".

Each heading is a toolbar and all the related options are also enclosed in another toolbar. When you click on a heading, a small piece of javascript code is executed which toggles the "Visibility Condition" of another the toolbar. For example, when the "Products" menu item is clicked, a javascript code is executed so that the "Visiblity Condition" of the "Products" toolbar is toggled.

Next, the trick is to use "Free Flow" to position each one of the toolbars.
In the sample above we used a table and placed each toolbar inside a series of cells using the "Free Flow" positioning guidelines (as expliend the "Positioning the Menus" tutorial included with DHTML Menu Builder's documentation).

The table HTML code is very simple and looks like this:

  CollapsibleMenus w/o AddIns (174 KB)