First, two global JavaScript arrays are defined. They are global because they are defined outside of any function. One has the names of the <div> IDs, and the other has the Name value of the images. That Name value comes from the "Name=" that I put on the first and second columns. I named the images so now I can refer to them by name. This is needed to change the icons in front of an expanded subcategory to be the twisty pointing to the right (EXPAND.GIF). If I didn't have the name value, I'd have to go through all the images and see if it's supposed to be expanded or collapsed. This way, I can just quickly reference the image I know I want to change. In the first example, this wasn't necessary because only the selected image was being changed. Now, other images may be changed, so we need to be able to quickly get to the correct image on the page.

After the global arrays are defined comes the function definition. Inside the function, loop through all the images on the page. If the image has the phrase "/icons/expand.gif" in it, then we know it's a twisty. This means you can have other images on the page that won't be affected by this (they won't be put into the array). Pull the "Name=" value out of the image and put it into the "imgNames" array. The image name is of the format "Img#" where # is the category number. Into the "tagNames" array we want "Cat#," so we put in the constant "Cat" followed by the image number after "Img" (i.e., starting with the fourth character). I'd like to point out that "imgNames.length++" increases the size of the array and then returns the value of that last entry. It's a quick way to append a value to an array of dynamic size.

OK, so now we have two arrays of the image names and their associated category names (the <div> tag ID's). Now, when a category is collapsed, we need to see if any other categories need to be collapsed as well. This goes into the doOutline function. That function now becomes: