Animated Collapsible DIV Collapse[] not working

[driftek]

1) Script Title: Animated Collapsible DIV

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

3) Describe problem: On my site I am trying to only expand a div when a button says On. So I am using rel="collapse[mydiv]" whenever the button says Off, but it isn't working. Please view http://driftek.com/customersites/welspun/beta/createabed.php . If you click the On/Off button on the Accent Pillow it should expand when it is turned on and collapse when turned off. I have even card coded rel="collapse[mydiv]" to see if I can get it to always stay collapsed and it doesn't work.

Please advise

[vwphillips]

using the DD example with new function call in red

<p><b>Example 1 (individual):</b></p>
<div style="height:50px;background-Color:red;" >
<a href="javascript:animatedcollapse.toggle('jason');Toggle('b1','On','Off');"><img src="http://www.dynamicdrive.com/dynamicindex17/toggle.jpg" border="0" /></a>
<div id="b1" >On</div>
</div>
<div id="jason" 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>

the new function

function Toggle(id,a,b){
 var obj=document.getElementById(id);
 if (obj){
  obj.innerHTML=obj.innerHTML==a?b:a;
 }
}

better with no additional function use the script function

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 var obj=document.getElementById('b1');
 if (divobj.id=='jason'&&obj){
  obj.innerHTML=state=='block'?'Off':'On';

 }

and the HTML

<p><b>Example 1 (individual):</b></p>
<div style="height:50px;background-Color:red;" >
<a href="javascript:animatedcollapse.toggle('jason');"><img src="http://www.dynamicdrive.com/dynamicindex17/toggle.jpg" border="0" /></a>
<div id="b1" >On</div>
</div>
<div id="jason" 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>




[driftek]

Hmm. I can see how this might work except my div name is dynamic. Is there anyway to prevent the Animate Div event from triggering? Or to get this to work with a dynamically created divs?

Problem solved. I layered another div on top of the collapsible div so clicking the image wouldn't trigger the accordion effect.