div menu?

Hi there all!!

I have a menu script so far that looks like this:

java 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>

HTML:


<a href="#welcome" onClick="java script:showHide('welcome')">
<div class="button" id="welcomeb"><strong>welcome</strong></div></a>
<div id="welcome" class="box">Welcome to Blah...!</div>

<a href="#about" onClick="java script:showHide('about')">
<div class="button" id="aboutb"><strong>about</strong></div></a>
<div id="about" class="box" style="display:none;">LALALA</div>


I was wondering how I could modify it, so that when I click on one menu link, the other menu DIVs will close?

A quick response will be HUGELY appreciated!

Peace,
Ant..

set document.getElementById(elementid).style.display to display none for the alternating div.. you are almost there. 2 more lines of code should do it

Soz... I'm a bit of a n00b at javascript.

What is the actual code I need to achieve this?

Thanks HEAPS!! :D

<script type="text/javaScript">
document.getElementsByClassName = function(c){
var el = [], found = [];
if(document.getElementsByTagName) {
el = document.getElementsByTagName('*');
for(var i = 0; i < el.length; i++) {
if(el[i].className === c) { found.push(el[i]); }
el[i] = null;
}
}
return found;
};

function showHide(elementid){
var divs = document.getElementsByClassName('box');
for(var i = 0; i< divs.length; i++){
if(divs[i] == document.getElementById(elementid)) { divs[i].style.display = "block";}
else { divs[i].style.display = "none";}
}
}

</script>

Worked brilliantly for me...

Peace,
Ant..