I have a nice little script I have installed on a clients website consists of a four-button gif image. Each of the buttons, when clicked, displays a paragraph of "help" text. If you click button #1, it displays the paragraph of text. If you click button #1 again, it hides the text. If you click and open paragraph #1 and then click button #2, it shows paragraph #2 but continues to show paragraph #1 What I would like to do it figure out a way where, if Parah. #1 is showing, and you click button two, not only does paragraph #2 show, but para. #1 goes away.
Here's the header script:
<SCRIPT LANGUAGE="JavaScript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
</SCRIPT>
Here's the script that is connected to the image (with the image map coordinates):
<area shape="RECT" coords="102, 4, 229, 24" href="javascript:showHide('div1')" />
<area shape="RECT" coords="235, 4, 397, 25" href="javascript:showHide('div2')" />
<area shape="RECT" coords="405, 4, 508, 25" href="javascript:showHide('div3')" />
<area shape="RECT" coords="518, 4, 632, 25" href="javascript:showHide('div4')" />
and here's a sample of the DIV that displays:
<div id="div1" style="DISPLAY: none">Content of the Div that shows.</div>
Any help you can provide would be great.
