Using collapsible divs with cfoutput

[MarianneValentine]

Hi there -
I haven't quite got started yet - I'm trying to avoid a bunch of time-consuming experimentation and was hoping
someone here had already done something like this and could point me in the right direction -

I'm attaching some code created by Dynamic Drive that creates collapsible divs from hard-coded info (as in a
dynamic menu tree). What I'd like to do is figure out a way to replace that hard-coded info with data dynamically
generated with a query, looping through as one does with a table. I'm avoiding using the table because the number
of variables is so many, outputting them to table rows is overwhelming for the viewer. I'm thinking collapsible divs
will do the trick nicely.

How would I go about using the attached code to loop through the query and dynamically create divs? It doesn't
seem like it's a simple matter of creating a cfoutput using this code with the necessary variables, like when you
use a query to generate rows in a table... From what I've seen, it looks like maybe I'd have to convert to query to
xml (as per another collapsible div example I've seen). This looks hairy to me! so I'm wondering if that's strictly
necessary. If this is the only way, I guess I just need someone to tell me so and that's what I'll do. Any ideas?


Here's what I'm trying to create:

Output name of first teacher - a date - a second kind of date
**beginningoffirstcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endoffirstcollapsiblediv**

Output name of second teacher - a date - a second kind of date
**beginningofsecondcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endofsecondcollapsiblediv**

Output name of third teacher - a date - a second kind of date
**beginningofthirdcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endofthirdcollapsiblediv**

and so on... for as many staff as fit the query's parameters.

[MarianneValentine · Accepted solution]

Okay - I'm feeling pretty dumb - I just discovered that there is a Spry widget that does this sort of thing - boy, do things move quickly!