Expanding / Collapsing Sections on a Page

Updated July 6, 2009
Iron Speed Designer V6.2 and later

You may find it useful expand / collapse sections of a web page.  While there is no direct support of this in Iron Speed Designer, you can easily add this using Dynamic HTML to your page.

Step 1:  Uniquely name each expandable/collapsible region with an "id" attribute, e.g.:

<table id="region1"...>

This is easily accomplished by adding ‘id’ attributes via the Tag Attributes dialog (Right-click, Styles, Table… etc.)

Step 2:  When the user clicks the expand/collapse icon, catch the event and call the "toggling function", e.g.:


The event should also be consumed so as not to be allowed to propagate to its parent container, which may also have its own onclick eventhandler.  This is, in fact, the case if you embed your own regions within Record and Table panels created by Iron Speed Designer.

Step 3:  In the toggling function, locate the region to be toggled, e.g.:


Step 4:  In the toggling function, toggle the region’s visibility.  For example, to show or expand the region, set:

region1.style.display = "block"

To hide or collapse the region, set:

region1.style.display = "none"

You can search on the Internet to find code snippets that perform this function.  One such link is:


See the section on Expanding/collapsing outlines.