ATCI + Expand group details.
Second define your sections; + Show section details.
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 '
Third define the elements of each section; + Show details for the elements.
There are three key HTML elements inside a section. Two '
The detail information you want to expand and collapse goes here.
+ Show details for the first span element.
The first span tag calls the function, and should be initialized with a "+" sign. This is because the function assumes all sections start in the collapsed state. Your user's first action should be to expand a section. When a user expands a section the function will change the "+" to a "-" or vise-versa in this span tag.
+ Show details for the second span element.
The second span tag is changed by the function from "Show" to "Hide" and vice-versa when a user clicks on the "+" or "-" control for the section.
+ Show details for the div element.
The div tag is initially defined with the "display: none;" style. This is the collapsed state for a section. The function will change this to "block" to expand the section, and back to "none" to collapse it again.
"+", "Show", and "none" are the control values of a collapsed section.
"-", "Hide", and "block" are the control values of an expanded section.
Close your sections and group: + Show closing detail.
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:
And close your group with:
Other information: + Show additional detail.
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.
I tried to keep this function as simple as possible, so that it could be inserted into nearly any web page. It can be used inside forms, frames, and tables. As far as I know you can put just about anything inside the collapsible division, including another expand/collapse group.
The function depends on the relative position of the elements inside each section. This eliminates the necessity for a specific naming convention for the elements, sections, and groups.