PDA

View Full Version : Animated Collapsible DIV Collapse[] not working



driftek
01-14-2014, 03:47 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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
01-15-2014, 09:42 AM
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
01-15-2014, 11:22 PM
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.