The "<div..." Expand/Collapse control function

A group is a collection of sections that you wish to dynamically expand or collapse. When one section is expanded, all other sections in this group are collapsed. You can define multiple groups on a single page as long as each has its own unique ID. The function will control each group independently.

You define a group with a '<div ...' HTML tag. The key is to include the 'id= ...' attribute, and make sure each group has a unique id.

<div id="unique_id">

A section is a collection of HTML elements used to identify and control the 'div's you want to expand and collapse. You can define as many sections as you need, the function will find them.

Sections must be defined with the '<div ...' HTML tag, and just like the group, each section must have a unique id.

<div id="unique_id">

There are three key HTML elements inside a section. Two '<span ...' HTML tags and one '<div ...' HTML tag. They should be coded as follows: (style atributes can be moved into a style sheet)

<span id="unique_id" onclick="ExpandCollapse(this.id);" style="cursor: pointer;">+</span>

<span id="unique_id">Show</span>

<div id="unique_id" style="display: none;">

The detail information you want to expand and collapse goes here.

</div>

"+", "Show", and "none" are the control values of a collapsed section.

"-", "Hide", and "block" are the control values of an expanded section.

Don't forget to "close" all your sections and your group. HTML is still kind-of picky about closing tags. Besides, if you don't include the closing tags, the function will not be able to determine where one section ends and the next section begins. Close each section with:

</div>

And close your group with:

</div>

Of course you can add other text before, after, and around the elements described in the previous section. You can even include other HTML elements. Just make sure the two span elements described above are the first two span elements in the section, and the div element described above is the first div element in the section. The function expects these elements to be the first elements it finds in a section.

In case you are wondering, this web page uses the function described here. So you can view the source of this page to help determine how to use the function. You may have also noticed that there are two expand/collapse groups in this page. The second group is embedded inside the third section of the first group. The function can handle it.

You want to get a little more complex? On one of my other web sites I used this function inside a form element to break up and organize the form's input elements.

Since the function (yes it is a single function) is only about 30 lines long, you should be able to simply cut it out of the source of this web page and paste it in your web page.