Make a Sub menu to show up - php

Question

Hey so I have a problem, one I cant figure out. I cant seem to make it so only one sub menu to show up. Ex: When on About.php it has a constant submenu based on the code below. So when I click on Info for another submenu to pop up I want it to close the constant submenu and open the new. Not just write me another submenu below it. I do not care really what form it is in, javascript or php. Just would like it simple for me to do, and if you need my js file: JS FILE
CODE:
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'gallery')
echo '<div id="div_1" style="display:none"></div>
<div id="div_2">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'about')
echo '
<div id="div_1"></div>
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
?>
<?php
if ($bar == 'about')
echo '
<li>ABOUT</li>
<li>CONTACT</li>';
if ($bar == 'gallery')
echo '
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>';
?>

Answer 1

You're repeating id="sub-menu" in your HTML.
ID is supposed to be unique to ONE element.
CLASS can be repeated/reused on multiple elements.
Looking at your JS file...you're attempting to engage at least 2 or 3 elements simultaneously by using getElementById(elemId) - I've not tried running your code, but I'm betting it throws an error.
In your HTML - set a unique ID to one of your sub menus (id="sub_menu_1"). Then use that same ID in your JS getElementById('sub_menu_1'), and see if your situation improves.

Answer 2

you have to change this line like this
<a id="a_title_3" onclick="SetCurrent(3);return false;"><span>INFO</span></a>
there are two "a_title_2" id named objects.
<a id="a_title_2" onclick="SetCurrent(2);return false;" href="#" class=""><span>GALLERY</span></a>
<a id="a_title_2" onclick="SetCurrent(3);return false;" class="current"><span>INFO</span></a>
it will work fine when you change it to '3'.