I based this little bit off some code I found on another web site. That code used the + and - symbols to handle the flip. I rewrote it to handle images. It looks pretty raw here, and normally would be jazzed with tables, graphics, and such.

<script language="javascript">
	imgminus = new Image(); 
	imgminus.src = "minus.gif"; 
	imgplus = new Image(); 
	imgplus.src = "plus.gif";


	function toggle(divId, imgname) {
		var d = document.getElementById(divId);
		if (d.style.display == '') {d.style.display = 'block';}
		if (d.style.display == 'none') {
			 document [imgname].src = imgminus.src; 
			 d.style.display = 'block';
		} else {
			 d.style.display = 'none';
			document [imgname].src = imgplus.src;
		}
	}
</script>
<form>
	Testing <a title="show/hide" href="javascript:void(0);" 
	onclick="toggle('microtable', 'microtablelink');">
	<img src="minus.gif" border="0" name="microtablelink" /></a>

	<div id="microtable">
		content
	</div>
</form> 

Expand this section

What were you expecting?

---

Expand this section

Some random content.