Animated Collapsible DIV v2.4

[campbelson]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
Hello,

I would like multiple animated divs that are each assigned an id dynamically.
I have a php page which reports different results and I would like to use the script on each of them.

I know how to add div ids manually in the script:
animatedcollapse.addDiv('tog1', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('tog2', 'fade=0,speed=400,group=pets')
ETC

But since there may be as many instances of the use of the script as the database requires, depending on user information inputs, how can I tell the script to process all possible ids generated in the HTML, bearing in mind that php will assign the different div ids autmatically in the HTML such as
div id="X1", div id="X2"

and the corresponding
<a href="javascript:animatedcollapse.toggle('X1')>,
<a href="javascript:animatedcollapse.toggle('X2')>

Can I thus modify the js script to work for all X++ found on the html page that is generated by php?

not sure I am being clear

Thanks a lot

[ddadmin]

Do the dynamically generated IDs follow a certain pattern, such as "x1", "x2".." etc? If so as far as initializing them, you can just do something like this in the HEAD section of your page:

for (var i=1; i<4; i++){
	animatedcollapse.addDiv("x"+i, 'fade=0,speed=400,group=pets')
}

The above would be the same as if you had manually called:

animatedcollapse.addDiv("x1", 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv("x2", 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv("x3", 'fade=0,speed=400,group=pets')

Now, as far as also dynamically generating the corresponding links, such as:

<a href="javascript:animatedcollapse.toggle('x1')>

That's a little more tricky. There are a few different approaches I can think of, but more details on how much of your collapsible DIVs' markup is dynamically generated is needed first. For example, is everything generated this way, with the total number of DIVs involved unbeknownst by you until they are actually output?

[campbelson]

The number of ids generated by (saved on) the database can be known indeed through a php request.

Thus I have implemented it this way and it seems to work (i dont remember why I put <a href="javascript:animatedcollapse.toggle('x1')> in my question.)

<a href="#" rel="toggle['x<?php echo $j [0]; ?>']" data-openimage="images/form_cancel.gif" data-closedimage="images/form_modif.gif"><img src="images/form_modif.gif" border="0" /></a>

and

<div id="x<?php echo $j [0]; ?>" style="display:none">

Where "$j [0]" represents all the of the ids of interest found in the database.

I would be interested to know why it would be tricky though. Is there something I'm missing which may cause problems later?
I will repost anyway if i come across another issue in my implementation.

Thank you so much for your help!

[ddadmin]

How tricky the whole process depends on a number of factors. In the case of the toggler links, such as:

<a href="javascript:animatedcollapse.toggle('x1')>

the worst case scenario would be when they can't be dynamically generated, and instead of having the database output the "x1" portion of the markup, you need to find a way get the toggle() function to work without having the explicit ID of the collapsible DIV passed into it as a function. One solution I was thinking was for the function to dynamically seek out the closest collapsible DIV on the page and toggle that. But since you are able to generate much of the markup dynamically and using information from the database, that would be the best and most versatile way, yes.