Click to display , i.e. Show/Hide troubleshooting

I can show, but I want to hide...

[mcjohnson]

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.

[astupidname]

Plug this in the head and toss your other script:

<script type="text/javascript">
var idHolder;
function showHide(elementid){
if (idHolder != undefined && !idHolder.match(elementid)){
document.getElementById(idHolder).style.display = "none";
}
idHolder = elementid;
var isitshown = document.getElementById(elementid).style.display;
document.getElementById(elementid).style.display = (isitshown === "none")?"":"none";
}
</script>

[mcjohnson]

SCORE! Thanks. Awesome.

Pat

[astupidname]

You are welcome, but, you know what? I just realized my brain farted. I made an error here, should not have used the match() method, should be doing direct comparison instead (between the idHolder and elementid). So please use this instead (I don't know what I was thinking! Using the match method would cause a mixup if one element has id "foo" and another one has id "footwo" as "foo" would be matched in the other id. Sorry if I am mixing you up, but the following is the correct way to go about it, really I'm not kidding this time!):

<script type="text/javascript">
var idHolder;
function showHide(elementid){
if (idHolder != undefined && idHolder != elementid){
document.getElementById(idHolder).style.display = "none";
}
idHolder = elementid;
var isitshown = document.getElementById(elementid).style.display;
document.getElementById(elementid).style.display = (isitshown === "none")?"":"none";
}
</script>