Show/Hide div with toggle image 1

[tumeke]

Hi there,

I have found this script and it is working perfectly, but now the client was a little arrow to change when the link is clicked in the hidden div is shown. Could someone please advise how I can alter this script to include this functionality.

function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

 

[BillyRayPreachersSon]

Giving us the source for the "little arrow" in question might be a good start... Right now, we know nothing about it.

You should also refactor that code to remove all that archaic browser detection code... unless, of course, your target market is 10-year old browser technology! Something like this:

function toggleLayer(whichLayer) {
	var elem = document.getElementById( whichLayer );
	var vis = elem.style;

	// if the style.display value is blank we try to figure it out here
	if (vis.display == '' && elem.offsetWidth != undefined && elem.offsetHeight != undefined) {
		vis.display = (elem.offsetWidth !=0 && elem.offsetHeight != 0) ? 'block' : 'none';
	}
	vis.display = (vis.display == '' || vis.display == 'block') ? 'none' : 'block';
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tumeke]

Thank you very much for your reply. Sorry forgot about the 'little arrow' information.

I have 2 images.

1. blueArrowRight.jpg
2. blueArrowDown.jpg

<img id="state0" src="images/blueArrowRight.jpg" alt="" /> <a href="javascript:ShowContent('info0'); return true;">Question title goes here</a>

When I click on the link I want the image in this case with id state0 to change to blueArrowDown.jpg and when the div is closed it returns to blueArrowRight.jpg

Hopefully this is as much information as you need.

Thanks,
Simon.

 

[tumeke]

Does anyone know how I can do this.

Thanks,
Simon.

 

[BillyRayPreachersSon]

In your script section, initialise a global boolean variable to true. Then in your "ShowContent" function, toggle that variable with:

yourVarName = !yourVarName;

Then test that variable. If it's true, set the image to one src, if false, then the other. You can set the image src using getElementById to get a reference to the image:

document.getElementById('state0').src = 'path/filename.gif';

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tumeke]

Thank you so much for the help.

Everything is working perfectly now.