Animated Collapsible DIV - using different images for toggles.

[newyorker2]

) Script Title: Animated Collapsible DIV v2.01

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

3) Describe problem:


I am using images for the toggles. Just like you did in your example. http://www.dynamicdrive.com/dynamicindex17/toggle.jpg

My question I want to be able change the image when it is clicked on.
So whichever menu is expanded it's toggle image will be different color.

in other words I want to use toggle_on.gif when it is clicked and expanded.




thank you for your time and help

[rangana]

See if adding an onclick event handler on your image helps:

<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';" />

Replace the value of highlighted in red for whatever div you want to reference with.

Hope it helps.

[Nile]

You also need your toggle_off.jpg, and toggle_on.jpg. But I think that you want .gif, so do this(just a slight modifacation):

<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.gif':'toggle_on.gif';" />

Just if you couldn't figure it out.

[newyorker2]

thank you all. let me give it a try

[newyorker2]

See if adding an onclick event handler on your image helps:

<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';" />

Replace the value of highlighted in red for whatever div you want to reference with.

Hope it helps.

it works for the first time, but when i want to toggle a few times it stops working.

basically what i want is if i hit jason div, image with arrow down shows up, if i hit kelly div it's toggle arrow down image shows up, and jason toggle image gets back to original up state.

the code you wrote works for the first time, but if i want to toggle a few times it stops working.

[newyorker2]

any other ideas?

[rangana]

Add the highlighted:

"imgreset();this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';"

...and have this:

<script type="text/javascript">
function imgreset()
{
	var defimg='toggle_on.jpg', // Default image.
	imgs=document.getElementsByTagName('img');
	for(var i=0;i<imgs.length;i++)
		{imgs[i].src=defimg;}}</script>

Hope it helps.

[newyorker2]

Add the highlighted:

rangana thank you for your help,

i think this will work but when i toggle it replaces ALL of the other images on the page as well.

any ideas?

[newyorker2]

this is what i created after seeing your code.

<script type="text/javascript">
function imgreset1()
{
	var defimg='../images/btn_toggle1.gif', // Default image.
	imgs=document.getElementById('quote');
	for(var i=0;i<imgs.length;i++)
		{imgs[i].src=defimg;}}
</script>
<script type="text/javascript">
function imgreset2()
{
	var defimg='../images/btn_toggle2.gif', // Default image.
	imgs=document.getElementById('agent');
	for(var i=0;i<imgs.length;i++)
		{imgs[i].src=defimg;}}
</script>


<a href="javascript:animatedcollapse.toggle('drop1');"><img id="quote" src="../images/btn_toggle1.gif" border="0" onclick="imgreset1();this.src=(document.getElementById('drop1').style.display!='none')?'../images/btn_toggle1.gif':'../images/btn_toggle1_on.gif';" /></a><a href="javascript:animatedcollapse.toggle('drop2');"><img id="agent" src="../images/btn_toggle2.gif" border="0" onclick="imgreset2();this.src=(document.getElementById('drop2').style.display!='none')?'../images/btn_toggle2.gif':'../images/btn_toggle2_on.gif';" /></a>

it works almost like how i wanted. with one problem.

if i click on toggle1, toggle2 image doesn't go back to original state.

[rangana]

rangana thank you for your help,

i think this will work but when i toggle it replaces ALL of the other images on the page as well.

any ideas?

Because I was referring to all the images using this loop:

imgs=document.getElementsByTagName('img');
	for(var i=0;i<imgs.length;i++)
		{imgs[i].src=defimg;}}</script>

The fix is to surround all of the images you want to be affected with an element.
Let's take for instance div, and give it an id let's take for instance, myid.

Then, add the highlighted in the script:

imgs=document.getElementById('myid').document.getElementsByTagName('img');
	for(var i=0;i<imgs.length;i++)
		{imgs[i].src=defimg;}}</script>

Your post#9 is confusing, maybe because I haven't replied on post#8. Anyway, if problem still exist, get back.
Hope it helps.