Animated Collapsible Div with dynamic divs [Archive]

shudini

04-03-2009, 03:44 PM

1) Script Title: Animated Collapsible DIV

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

3) Describe problem: On my website, users can search on specific values, the results of which will be grouped into sections, each of which is its own unique div.

I want to be able to toggle each generated section, but I have not figured out how to create the object.addDiv to the javascript since the web server is generating the page content after creating the <head> tag.

I am relatively new to javascript, so please excuse my ignorance if this is a simple answer.

Thanks for any help.

ddadmin

04-03-2009, 09:59 PM

Hmm if your page's contents are dynamically generated, then in order to enable this script on those contents, the initialization portion of the script itself also needs to be dynamically generated, ie, this portion:

<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

JavaScript is basically like HTML, and can be dynamically written out. In this case, you'd write out the entire code above dynamically, replacing the various content IDs (ie: 'jason') to match those of your contents instead. How to do this exactly really depends on how your pages are being generated to begin with, such as PHP/mySQL.