Help with Animated Collapsible DIV v2.01

[bingeboy]

1) Script Title:
Animated Collapsible DIV v2.01

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

3) Describe problem:
Hi I've been using this great script Animated Collapsible DIV v2.01 and was wondering if there was an easy way to toggle the image link for the div. Basically I want a + image turned into a - when clicked. Something also to note is there is more that one of these images on the page.

I saw another post about this but it seemed like a older version of the code and wasn't working with the method show on link above. Any help would be great.

Thanks

[ddadmin]

This has been requested a few times, so I'll most likely add such a functionality to the script officially the next time it's updated. In the meantime, I've put together something that should work in the meantime. First, download the modified animatedcollapse.js file. Then, lets say you have the following Collapsible DIV plus toggler on the page:

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

<a href="javascript:animatedcollapse.toggle('jason')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason', ['test'])">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason', ['test'])">Slide Up</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>

This is just one of the default examples taken straight from the demo page. To get the toggler image (wa0img.jpg) to update based on the state of the DIV, modify the below examples with the code in red:

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

<a href="javascript:animatedcollapse.toggle('jason')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" id="togglerimage" rel="closed.gif" rev="open.gif" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

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

In other words, give the toggler image a unique ID (ie: "togglerimage"), and make sure the title attribute of the collapsible DIV is set to that (ie title="togglerimage"). Inside the toggler image, define a "rel" and "rev" attribute that points to the full path to the default (closed) image to use and the open image, respectively.

The one big limitation of this is that the images are only updated when the user explicitly clicks on the toggler image. This means if you have persistence turned on and the state of the collapsing DIV might be something other than closed (ie: open) by default, the toggler image doesn't update automatically when the page first loads. That's something that will be part of the official update to the script. In the meantime, if you really need this, I may come back to update the modified .js file with it if I have time.

[bingeboy]

Thanks for the prompt reply. I will try this out and post with my results.

[bingeboy]

Test and working great! Thanks so much for your help.

[mffishdog]

how can I modify this great edit of yours to swap text instead of an image? I'd like to show "View" and swap to "Hide"...