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


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


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


animatedcollapse.js -Collapsible DIV script from Dynamic Drive


custom.css - stylesheet that imports 960 grid system


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


960 Grid System - css library used for layout