Ajax calls with Animated Collapse Script

[garett]

1) Script Title: Animated Collapsible Div v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

I've been trying to figure this out for a couple days and have not been able to come up with a solution.

I'm trying to call the animated collapse via an ajax call to display multiple forms dynamically on a page. When the user interacts with the application, the ajax script will write the animated collapse and a form within it back to the page.

When I call the animated collapse for the initial page load it works good, then when I perform the first ajax call, the new animated collapse added to the page works as expected. But when I go and click on the animated collapse that was loaded during the initial page load, it opens, then immediately shuts. If I click on a link for another ajax call, the first animated collapse will open and shut, and then open again. The animated collapse from the first ajax call will open and shut, and the animated collapse that was just added will function normally.

So only the most recent animated collapse that is added to a page functions as expected. The others get a toggle appended each time an ajax call is performed. So if I do 10 ajax calls, the animated collapse that was first added will open and close 10 times when I click on it.

I found the same issue reported in the post below about "double animation":
http://www.dynamicdrive.com/forums/s...ad.php?t=49317

In debug mode, I found that it calls the toggle function multiple times for the same toggle click. I'm not sure what takes place in between the click and the toggle function getting called, and am not yet familiar with jQuery so I'm having a hard time moving forward.

I've created a simplified version of the scenario on the page below. Just click on the "Click here to view" link on the page to toggle the animated collapse, then click "Add Ajax Section" to add the new animated collapse to the page. Now click on the "Click here to view" link on the second animated collapse and you'll see that it functions as expected. If you go back to the first "Click here to view" link it opens and closes with one click. If you click the "Add Ajax Section" link again, then click the first "Click here to view" link, it will open and close as many times as the "Add Ajax Section" link was clicked.
http://www.freephonelookup.com/testing/

The init function is called each time the ajax code is executed:

animatedcollapse.init()

[garett]

I've fixed the demo at:
www.freephonelookup.com/testing

Additional demo with 2 different ajax calls:
www.freephonelookup.com/testing2