View Full Version : replace images with text to toggle hidden div

03-17-2009, 04:13 PM
1) Script Title: Animated Collapsible Div

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

3) Describe problem: I would like to change the "changing image toggle button" to text.

The code below:

animatedcollapse.ontoggle=function($, divobj, state){
if (divobj.id=="peter" || divobj.id=="sarah") //only react to these two collapsible DIVs
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "collapse.jpg" : "expand.jpg"

Basically states that the image SRC changes onclick.

Instead, I have text rather than an image that I'd like to change on click.

So for example, if I have the word "expand". Can it change to "collapse" onclick?

My HTML code:

<div class="CommonContentBox Highlighted2" style="padding-bottom:10px;">
<div style="height:10px;margin-bottom:20px;"><h4 id="forumposts-toggle" class="CommonContentBoxHeader"><a href="javascript:void(0)" onclick="javascript:animatedcollapse.toggle('forumposts')">► Latest forum posts</a></h4></div>

Is there a way to use JavaScript to change the text between the h4 tags?

Something like H4.text ?