Hi All:
I have a very long page of html that I want to take portions and hide
them in divs, then show when a link is clicked. I have the hide show
part working when the link is clicked, however I would really like to
use linked images instead to do the following:
- When open.gif is clicked, the contents of the div show and open.gif
is swapped with close.gif
- subsequently, when close.gif is clicked, the div contents get hidden
again and open.gig replaces close.gif
The tricky part (for me anyways) is to be able to do the image
swap/restore multiple times on the same page. Like I said, the div
show/hide function works fine and I kind of managed to get the imgae to
swap from open to clode but it wont swap back and I figure if I do it
multiple times whe way I wrote it (copied it) there is now way it would
work. Here is some sample code:
<HTML>
<HEAD>
<TITLE>main</TITLE>
<script language="JavaS cript" type="text/JavaScript">
function openIt(train) {
showIt = document.all[train];
if (showIt.style.d isplay == "none") {
showIt.style.di splay = ""
} else {
showIt.style.di splay = "none"
}
var x=1;
var pics=new Array('images/open.gif','imag es/close.gif');
window.document .images.this_on e.src=pics[x];
if (x) { x=0; }
else { x=1; }
}
</script>
</HEAD>
<BODY bgcolor="white" >
<a href="#" onclick="Javasc ript:openIt('li st1'); return false;"><img
src="images/open.gif" name="this_one" border="0"></a><br>
<div id="list1" style="display: none">
This will show/hide list1 when you click the above link
</div>
<a href="#" onclick="Javasc ript:openIt('li st2'); return false;">click
here to toggle</a><br>
<div id="list2" style="display: none">
This will show/hide list2 when you click the above link
</div>
<a href="#" onclick="Javasc ript:openIt('li st3'); return false;">click
here to toggle</a><br>
<div id="list3" style="display: none">
This will show/hide list3 when you click the above link
</div>
<a href="#" onclick="Javasc ript:openIt('li st4'); return false;">click
here to toggle</a>
<div id="list4" style="display: none">
This will show/hide list4 when you click the above link
</div>
</BODY>
If I can make this happen by swapping link text instead of images thats
OK too.
Thanks in advance for your help.
Eric B
