Take a look at my guestbook; http://community-info.org/scripts/dsp4guests.pl (see my home page if you'd like to add a comment; http://community-info.org). The page comes up pretty fast, even though it is created dynamically by a Perl script that gets it's fields from a MS Access database that it connects to with an ODBC connection. However, there are lots of entries and most of them have really long comments. Like I said, I'm satisfied by the speed of the page load, but I don't like that there it too much of the guestbook for a visitor to view easily. I decided I would collapse the comments to save page space.
The last time I looked at collapsible, expandable fields on a web page, it was done by loading the collapsible fields into an array. Next you put a '+' sign on the web page, that had an onlick property. Clicking on the '+' sign calls a JavaScript function that changes the '+' sign to another character (usually a '-' sign) and prints out the elements of the array to the web page, right below the '-' sign. Clicking on the minus sign reverses the process' pretty simple, but more work then I wanted to go through.
I searched the Internet for libraries that already had a collapser/expander function I could just call from an onclick property in a link or button. I came across the JavaScript Toolbox; http://www.mattkruse.com/javascript/ DHTML Tree is the package in the toolbox that does just what I was looking for; http://www.mattkruse.com/javascript/mktree/ The author, Matt Kruse gives credit to Stuart Langridge, http://www.kryogenix.org/code/browser/aqlists/ for writing the code for turning <ul> structures into tree structures. Matt Kruse went on to pairing up a JavaScript include (mktree.js) and a style sheet include (mktree.css) that you can put in your web pages to make the collapsing and expanding of <ul> structures into trees an automatic event on page load. So I put <ul> tags around my main loop (the page is created by a database cursor that loops inside a Perl script) and included the mktree files.
It worked just great if you have lots of patience! The new script made the page take 20 seconds to load on Serval (my newest PC) and over a minute on Caprica (an 8 year old PC that I still use a bunch - I'm creating this web page on Caprica). I decided the best way to speed up the page load was to take out the page loading action, and replace it with a link on the web page that has an onclick action of calling converttrees() (the JavaScript function that converts the <u> structures into trees). Now page visitors can collapse the guest comments if they want to, and get a Window alert that warns them that this can take a while. After running, converttrees() uses the DOM attribute visibility = "hidden" to get rid of the link. There are two other links on the page that let the visitor expand the trees (or the vistors can click on an individual '+' sign to expand the comments just for that '+' sign) or collapse them (or the visitor can click on an individual '-' sign to re-collapse that tree into a '+' sign).