Make a Sub menu to show up

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><a href="videos.php">VIDEOS</a></li>
                <li><a href="photos.php">PHOTOS</a></li>
                <li><a href="uploader.php">UPLOAD</a></li>
                <li><a href="http://www.isgclan.com/files.php">FILES</a></li>
        </ul>
        </div>
        </div>

                <div id="div_3" style="display:none">
        <div id="sub-menu">
        <ul class="menu">
                <li><a href="about.php">ABOUT</a></li>
                <li><a href="contact.php">CONTACT</a></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><a href="videos.php">VIDEOS</a></li>
                <li><a href="photos.php">PHOTOS</a></li>
                <li><a href="uploader.php">UPLOAD</a></li>
                <li><a href="http://www.isgclan.com/files.php">FILES</a></li>
        </ul>
        </div>
        </div>

                <div id="div_3" style="display:none">
        <div id="sub-menu">
        <ul class="menu">
            <li><a href="about.php">ABOUT</a></li>
                <li><a href="contact.php">CONTACT</a></li>
            </ul>
        </div>
        </div>';
        if ($s开发者_C百科ub == 'about')
        echo '
                <div id="div_1"></div>  

        <div id="div_2" style="display:none">
        <div id="sub-menu">
        <ul class="menu">
                <li><a href="videos.php">VIDEOS</a></li>
                <li><a href="photos.php">PHOTOS</a></li>
                <li><a href="uploader.php">UPLOAD</a></li>
                <li><a href="http://www.isgclan.com/files.php">FILES</a></li>
        </ul>
        </div>
        </div>

                <div id="div_3">
        <div id="sub-menu">
        <ul class="menu">
            <li><a href="about.php">ABOUT</a></li>
                <li><a href="contact.php">CONTACT</a></li>
        </ul>
        </div>
        </div>';
?>


<?php
    if ($bar == 'about')
        echo '
        <li><a href="about.php">ABOUT</a></li>
            <li><a href="contact.php">CONTACT</a></li>';
        if ($bar == 'gallery')
            echo '
            <li><a href="videos.php">VIDEOS</a></li>
            <li><a href="photos.php">PHOTOS</a></li>
            <li><a href="uploader.php">UPLOAD</a></li>
            <li><a href="http://www.isgclan.com/files.php">FILES</a></li>';
?>

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.

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'.