Hi,
Please check below script, its working fine.
I have made some changes in your script. I hope it fulfills your requirement.
<script language="JavaScript" type="text/JavaScript">
<!--
function showHide(theid)
{
if (document.getElementById)
{
HideOthers(theid);
var switch_id = document.getElementById(theid);
if(switch_id.className == 'hide')
{
switch_id.className = 'show';
}
else
{
switch_id.className = 'hide';
}
}
}
function HideOthers(theid)
{
if(document.getElementsByName)
{
var eleArray = document.getElementsByName('hideGroup');
for(i=0;i<eleArray.length;i++)
{
if(eleArray[i].id != theid)
{
eleArray[i].className = 'hide';
}
}
}
}
</script>
<style>
.hide{
display: none;
margin-left:2px;
margin-top:2px;
}
.show{
display: block;
margin-left:2px;
margin-top:2px;
}
</style>
<a href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
<div name="hideGroup" id="mymenu1" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
<div name="hideGroup" id="mymenu2" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
<div name="hideGroup" id="mymenu3" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div>