Animated Collapsible DIV, how to reduce the code if you have a lot of divs

[wuops]

1) Script Title: Animated Collapsible DIV v2.01

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

3) Describe problem:


I'm using the "Collapsible Div" in my blog: www.cineout.es and I will have a lot of divs to add in the "Collapsible Div" code. I have got this long code:



animatedcollapse.addDiv('peli1', 'fade=0,height=210px')
animatedcollapse.addDiv('peli2', 'fade=0,height=210px')
animatedcollapse.addDiv('peli3', 'fade=0,height=210px')
animatedcollapse.addDiv('peli4', 'fade=0,height=210px')
animatedcollapse.addDiv('peli5', 'fade=0,height=210px')
animatedcollapse.addDiv('peli6', 'fade=0,height=210px')
animatedcollapse.addDiv('peli7', 'fade=0,height=210px')
animatedcollapse.addDiv('peli8', 'fade=0,height=210px')
animatedcollapse.addDiv('peli9', 'fade=0,height=210px')
animatedcollapse.addDiv('peli10', 'fade=0,height=210px')


animatedcollapse.addDiv('trailer1', 'fade=0,height=298px')
animatedcollapse.addDiv('trailer2', 'fade=0,height=302px')
animatedcollapse.addDiv('trailer3', 'fade=0,height=375px')
animatedcollapse.addDiv('trailer4', 'fade=0,height=290px')
animatedcollapse.addDiv('trailer5', 'fade=0,height=330px')
animatedcollapse.addDiv('trailer6', 'fade=0,height=320px')
animatedcollapse.addDiv('trailer7', 'fade=0,height=320px')
animatedcollapse.addDiv('trailer8', 'fade=0,height=302px')
animatedcollapse.addDiv('trailer9', 'fade=0,height=310px')
animatedcollapse.addDiv('trailer10', 'fade=0,height=310px')


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
if (
divobj.id=="trailer1" ||
divobj.id=="trailer2" ||
divobj.id=="trailer3" ||
divobj.id=="trailer4" ||
divobj.id=="trailer5" ||
divobj.id=="trailer6" ||
divobj.id=="trailer7" ||
divobj.id=="trailer8" ||
divobj.id=="trailer9" ||
divobj.id=="trailer10"
) //only react to these two collapsible DIVs
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
if (
divobj.id=="peli1" ||
divobj.id=="peli2" ||
divobj.id=="peli3" ||
divobj.id=="peli4" ||
divobj.id=="peli5" ||
divobj.id=="peli6" ||
divobj.id=="peli7" ||
divobj.id=="peli8" ||
divobj.id=="peli9" ||
divobj.id=="peli10"
) //only react to these two collapsible DIVs
document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
if (
divobj.id=="peli1" ||
divobj.id=="peli2" ||
divobj.id=="peli3" ||
divobj.id=="peli4" ||
divobj.id=="peli5" ||
divobj.id=="peli6" ||
divobj.id=="peli7" ||
divobj.id=="peli8" ||
divobj.id=="peli9" ||
divobj.id=="peli10"
)
document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
}

animatedcollapse.init()


and this code in the buttons that collapse or expand all the divs:



<div id="Plegar_fichas" style="float:left; padding-left:5px;"><a href="javascript:animatedcollapse.hide(['peli1', 'trailer1', 'peli2', 'trailer2', 'peli3', 'trailer3', 'peli4', 'trailer4', 'peli5', 'trailer5', 'peli6', 'trailer6', 'peli7', 'trailer7', 'peli8', 'trailer8', 'peli9', 'trailer9', 'peli10', 'trailer10' ])"><img border="0" id="peli10_info-toggle" src="http://cineout.es/wp-content/extra/imgs/Plegar_fichas_no_active.png"/> </a> </div>
<div id="Extender_fichas" style="float:right; padding-right:5px;"><a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3', 'peli4', 'peli5', 'peli6', 'peli7', 'peli8', 'peli9', 'peli10' ])"> <img border="0" id="peli10_info-toggle" src="http://cineout.es/wp-content/extra/imgs/Extender_fichas_no_active.png"/></a></div>


I will have more divs with the same structure name: samename+id_number (peli1 and trailer1, peli2 and trailer2, peli3 and trailer3...... )

I'm sorry but I don't have a lot of programming skills, but I'd like to make this script more automatic and unlimited (from div peli1 to div peli1000000, for example). Maybe adding a "for" structure will be it possible. I don't know.

How can I modify the javascript code to obtain what I'm looking for?

Thanks to read this and sorry for my English (I'm Spanish).

[ddadmin]

The addDiv() portion can definitely be done inside a loop. However, the options by default would all be the same (ie: "fade=0,height=210px"). For example, if there are 15 "pelis" and "trailers", you can initialize them all using the following:


for (var x=1; x<=15; x++){
animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
animatedcollapse.addDiv('trailer'+x, 'fade=0,height=298px')
}

And for your ontoggle events:


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
if (divobj.id.test(/pali/))
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
else if (divobj.id.test(/trailer/))
document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"

[wuops]

Thanks to answer ddadmin, but I tried your code and it still doesn't work, then I tried to correct your code with this:



var i=1;
for (i=1; i<=15; i++){
animatedcollapse.addDiv('peli'+i, 'fade=0,height=210px')
animatedcollapse.addDiv('trailer'+i, 'fade=0,height=298px')
}

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
if (divobj.id.test(/trailer/))
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
else if (divobj.id.test(/peli/))
document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"

animatedcollapse.init()


but it still not working.

so, anyone have any ideas?

[ddadmin]

It should work. The following is a stripped down example that initializes 3 animated DIVs via a loop:


<script type="text/javascript">

for (var x=1; x<=3; x++){
animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
}

animatedcollapse.init()

</script>

And HTML:


<b><a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['peli1', 'peli2', 'peli3'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli1')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli1')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli1')">Slide Up</a>

<div id="peli1" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli2')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli2')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli2')">Slide Up</a>

<div id="peli2" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>



<p><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli3')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli3')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli3')">Slide Up</a>

<div id="peli3" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

If you have a lot of DIVs to animate, a potentially easier to set up script would be Accordion Content script (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm), since the contents are simply identified by a common CSS class, not unique IDs.

[wuops]

It works! Thank you.

But, for the code of "Show all" and "Hide all" buttons:


<b>
<a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3'])">Show Examples 1, 2, 3</a> |
<a href="javascript:animatedcollapse.hide(['peli1', 'peli2', 'peli3'])">Hide Examples 1, 2, 3</a>
</b>

I have to write all the names of the divs, and I will have lots of divs... so, Is any way to optimize this code?

if not, I will try the Accordion Content script (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm), as you said, because it works with class, not unique IDs.

Good advise, by the way :)

[ddadmin]

Inside your for loop you can also store the ids of all the auto generated ids, then pass them into functions show() and hide(). For example:


var divids=[]
for (var x=1; x<=3; x++){
animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
divids.push('peli'+x)
}

Then:


<a href="javascript:animatedcollapse.show(divids)">Show all</a>

[wuops]

Yes!! that's what I was looking for, thanks again.

I created a html test page: http://cineout.es/div_test/divs_test.html

It works well, but I'd like to optimize one more thing. To changes the image of the buttons when the divs are collapsed or expanded. I'm using the "animatedcollapse.ontoggle" function. To use this I have to write the name of each id div again (something like"divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3""). If I have more than 100 divs it will be hard to write every time I add a new div.



animatedcollapse.ontoggle=function($, divobj, state){
if (divobj.id=="trailer1" || divobj.id=="trailer2" || divobj.id=="trailer3")
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
if (divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3")
document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
if (divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3")
document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
}


How Can I optimize this code? Is it possible?

[ddadmin]

What you can do is do a general test for the keywords "trailer' or "peli", and update the image accordingly. For example:


animatedcollapse.ontoggle=function($, divobj, state){
if (/trailer/.test(divobj.id))
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
if (/peli/.test(divobj.id))
document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
}

[wuops]

I modified a little bit your code and now it works in all the toggle images, but something is wrong in the trailer div. When you click on the button image a javascript error popup appears:


An error exists inside your "ontoggle" function:
TypeError: document.getElementById(divobj.id + "_info-toggle") is null
Aborting execution of function.

You can see it in:

http://cineout.es/div_test/divs_test2.html

Any idea?