I can't figure out how to fix this.

The idea:
In a column on the left, there are some image thumbnails. When you click an image, a larger image is loaded into a 'placeholder' image.
At the same time, a related DIV is made visible. At this point, it works.

The problem:
...but the DIVs that are made visible stay visible if you click on another thumbnail - I would like it to replace the current visible DIV. I end up with a whole load of DIVs visible, instead of just the one. Can anyone please help?

Javascript code is:
function showPic (whichpic, divName) {
divStyle = document.getElementById(divName).style;
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
divStyle.display='block';
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
divStyle.display='none';
}
return false;
} else {
return true;
}
}

This is the link code for the thumbnails, say, 2 of them:
<a onclick="return showPic(this, 'image1')" href="images/image1.jpg" title="Some title text." target="_self"><img src="images/image1b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>
<a onclick="return showPic(this, 'image2')" href="images/image2.jpg" title="Some title text." target="_self"><img src="images/image2b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>

<div id="image1" style="display:none;">1</div>
<div id="image2" style="display:none;">2</div>

Thanks.