menu con showHide

[siuxy]

Ciao a tutti,
sono nuova del forum e premetto che sono alle prime armi con la programmazione. Ho creato un menu a tendina che si apre al click del mouse. Funziona correttamente solo che vorrei che cliccando su una voce del menu principale la tendina precedentemente aperta sparisse.
Vi posto il codice che ho creato finora.

<script type="text/javascript" >

function showHide(id)
{
if (id.style.display != 'block')
id.style.display = 'block';
else
id.style.display = 'none';
}
</script>


MENU 1
<div id='submenu1' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>




MENU 2
<div id='submenu2' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>




MENU 3
<div id='submenu3' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>

Grazie a chi vorrà darmi qualche indicazione.
Ciao
Siuxy

[RoTeam]

Questa piccola soluzione dovrebbe andarti bene, cosi in futuro se vuoi potrai aggiungerne anche altri

<script type="text/javascript" >
var ids = new Array();

function showHide(id)
{
//settalo nella funzione perché al parsing della pagina non sono ancora caricati i div
ids = [
document.getElementById("submenu1"),
document.getElementById("submenu2"),
document.getElementById("submenu3")
];


if (id.style.display != 'block')
{ 
for(var i=0; i<ids.length; i++) ids[i].style.display = ids[i]!=id ? 'none' : 'block'; 
id.style.display = 'block'; 
}
else
 id.style.display = 'none'; 
}
</script>

MENU 1
<div id='submenu1' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>




MENU 2
<div id='submenu2' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>




MENU 3
<div id='submenu3' style='display:none'>
<ul>[*]link1[*]link2[*]link3[/list]
</div>

[siuxy]

Funziona perfettamente.
Avevo pensato che potesse essere un discorso di variabili.
Grazie!
Ciao