Animated Collapsible DIV v2.2 - how to change text on links?

[meek]

Animated Collapsible DIV v2.2

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

The second link shows a way of changing two buttons so that the text toggles when the div is toggled. My question is, how can this be achieved with a text link? (I'm using a link to toggle the div, not an image.)

Thanks in advance.

[ddadmin]

Are you talking about regular text links that toggle a DIV, in which there is also an image toggler that should be updated based on the DIV's state? If so this is already the case when you follow the instructions on the supplementary page. For example, the demo near the bottom here reflects this.

[meek]

Hi.

Thanks for your reply. I just want regular text links - no images. But the text should behave like the images on the page you're referring to, so that when clicking the "Expand" link to toggle the div the text link changes to "Collapse".
I can't figure out how to change the script to do exactly that.

[ddadmin]

The process is exactly the same actually, except instead of updating the toggler's ".src" property, you'd update its ".innerHTML" property instead. For example:

animatedcollapse.ontoggle=function($, divobj, state){
	if (document.getElementById(divobj.id+"-toggler"))
		document.getElementById(divobj.id+"-toggler").innerHTML=(state=="block")? "Collapse" : "Expand"
}

HTML:

<a id="jason-toggler" href="javascript:animatedcollapse.toggle('jason')">Toggle</a>

<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>

[meek]

Ah, of course. That was the property I was looking for. Works perfectly. Thanks a lot for your help! (How do I mark this thread solved?)