I have a page which has some content that is generated via an AJAX request and JSON. The content is shown and hidden by clicking on each row using the (Animated Collapsible DIV v2.4 script ). It works fine if I have the page as one static file (which I did for testing) showing the same content the AJAX pulls. But when I display the page with AJAX generated content it comes through and the source code is essentially the same but my show/hide effects are not working. I am getting an error when I troubleshoot using Google Chrome Developer Tools that says: Uncaught TypeError: Cannot read property '$divref' of undefined. I tried switching the order of the Javascript and HTML to see if that was the problem. But I think it has something to do with the way the page is loading in the AJAX based version. I looked into using the JQuery LiveQuery plugin but I could not figure out how to make it work with my code nor do I know if it is the fix I need anyways. Thanks in advance for your help.

I have uploaded the live working and non-working version of the files to the locations below:

Working static file: http://fltest.comeze.com/indexgenerated.htm

Non-working AJAX generated version: http://fltest.comeze.com/


Here is my code:

indexgenerated.htm - static version of generated page with show/hide working

http://sshakir.pastebin.com/QtGbR1Bq

index.htm - ajax generated version of the page with show/hide not working

http://sshakir.pastebin.com/gzWEHpby

controlnewajax.js - javascript file that pulls JSON and creates final index.htm page

http://sshakir.pastebin.com/hp9fVDed

animatedcollapse.js -Collapsible DIV script from Dynamic Drive

http://sshakir.pastebin.com/J1TSB9UJ

custom.css - stylesheet that imports 960 grid system

http://sshakir.pastebin.com/jbzP2fce

micro-json-codeajax.js - JSON result set used for development of page

http://sshakir.pastebin.com/fD0ZM0RR

960 Grid System - css library used for layout

http://sshakir.pastebin.com/t202ruDY