Expanding / Collapsing Sections on a Page

Updated January 18, 2006
Iron Speed Designer V3.2

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 HTML layout page.

Step 1:  Uniquely name each expandable/collapsible region with an HTML "id" tag, for example:

<table id="region1"...>

Step 2:  When the user clicks the expand/collapse icon, catch the event and call the "toggling function", for example:

onclick="hisExpandCollapseFunction()"

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 generated by Iron Speed Designer.

Step 3:  In the toggling function, locate the region to be toggled, for example:

document.getElementById("region1")

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

region1.style.display = "block"

to show or expand the region.

Set

region1.style.display = "none"

to hide or collapse the region.

See Also

You can search on the Internet to find code snippets that perform this function.  One such link we found was located at:

http://www.jalfrezi.com/frames/fdhtml.htm

See the section on Expanding/collapsing outlines