Animated Collapse and image swap

[ecwyatt]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): Animated Collapsible DIV

3) Describe problem: Need an image swap onclick


Let me start by saying, I am new to Javascript. This script is pretty much exactly what I am looking for But I was hopping to get it to do just one more thing. I have only one div that I want shown when a link is clicked and then disappears when clicked again. this script works fine in all browsers I need it to. My PM wants the link to change when clicked So basically I have two images I wanted to use one for expand one for contract:

Click for more information +

upon clicking the image needs to be changed to

Click for more information x

and then upon clicking it would go back to:

Click for more information +

I tried to just add another script and that worked in everything except IE7 it breaks the animated collapse code. I was hoping some one could guide me in what I need to do so that I can add this feature.


Thanks

ec

[ecwyatt]

I figured it out
Like I said I'm new to JS so when I wrote the coding I had one script called from inside an a tag (see below) FF and Safari could show it fine. But IE7 couldn't, Not an IE7 bug, but I think rather a newbie mistake.
So I had this:

<span class="expand">
	<a href="javascript:collapse2.slideit()">
	<div id="Layer1">
	<img src="images/expand1.jpg" alt="For more information Click Here" width="200" height="25" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show')" />
</div></a>
	<a href="javascript:collapse2.slideit()">
	<div id="Layer2">
	<img src="images/expand2.jpg" alt="Click here to Hide Content" width="200" height="25" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" />
</div></a>
</span>

I just changed it to:

<span class="expand">
	<div id="Layer1">
	<img src="images/expand1.jpg" alt="For more information Click Here" width="200" height="25" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show');javascript:collapse2.slideit()" />
	</div>
	<div id="Layer2">
	<img src="images/expand2.jpg" alt="Click here to Hide Content" width="200" height="25" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide');javascript:collapse2.slideit()" />
	</div>
</span>

After the change it works fine. But if any one has a better way to do this let me know.

Thanks

ec

[doorock42]

Have I missed a bit of code? I've copied your example, but both images stack, unfortunately, rather than showing one or the other. Have you done something else in your code that makes that not happen?

Thanks.