Switch Menu In Javascript

I formerly choose Accordion Control in Microsoft Ajax Control toolkit in my application. I like menu with such switching  style. The control is well in it's appearance. For example, we can set frames per second of switching animation and fading transition effect.

However, I encountered the problem when I set  AsyncPostBackTrigger of updatepanel to the LinkButton inside the accordion. If do this, there will be a error at runtime said that  LinkButton1 is not exist. I found a lot of developer have the same confusion at the official forum of asp.net but I can't get answer of it. I think this is may be control name changed when it is in a panel.

I tried another way to solve this problem is to put accordion in a updatapanel. Unfortunately, It still din not work due to LinkButton can't raised event.

Because I can't get the solution of it. I decided to write a switch menu in such style although the self-made one will be simple without any animation or fading effect.

We know we can use CSS style.display attribute to display or hide the div, control and so on. So it's not difficult to make a simple switch menu in Javascript. At first we made menu in html

<ul id="nav-secondary">
    <li id="Menu1"><a href="#" onclick="SwitchMenu('Menu1','nav-secondary')">Menu 1</a>
        <ul style="display: none;">
            <li><a href="#" id="A1">Sub Menu 1.1</a></li>
            <li><a href="#" id="A6">Sub Menu 1.2</a></li>
        </ul>
    </li>
    <li id="Menu2"><a href="#" onclick="SwitchMenu('Menu2','nav-secondary')">Menu 2</a>
        <ul style="display: none;">
            <li><a href="#" id="A5">Sub Menu 2.1</a></li>
            <li><a href="#" id="A7">Sub Menu 2.2</a></li>
        </ul>
    </li>
    <li id="Menu3"><a href="#" onclick="SwitchMenu('Menu3','nav-secondary')">Menu 3</a>
        <ul style="display: none;">
            <li><a href="#" id="A2">Sub Menu 3.1</a></li>
            <li><a href="#" id="A3">Sub Menu 3.2</a></li>
            <li><a href="#" id="A4">Sub Menu 3.3</a></li>
        </ul>
    </li>
</ul>

SwitchMenu is defined in the Javascript to display or hide the sub menu. note is added. the statement used to set CSS class is optional

var currentMenu;                             //Global variable: current menu

//Parameter obj is the menu you clicked, container is the container layer of menu
function SwitchMenu(obj,container){         
    if(document.getElementById(container)){  
        if (currentMenu!=null) {

            //Clear css style of current menu
            currentMenu.className="";       
        }       

        //Get the target menu you clicked     
        var targetMenu = document.getElementById(obj);      

        //Get sub-menu of target menu        
        var secondaryMenu= targetMenu.getElementsByTagName("UL")[0];    
        var secondaryMenus = document.getElementById(container).getElementsByTagName("UL"); //get all submenus   
        if (secondaryMenu==null) {                                  //No sub menu                                 
            for (var i=0; i<secondaryMenus.length; i++){    

                 //Hide all sub menu                       
                secondaryMenus[i].style.display = "none";                          
            }

            //Set target menu css class
            targetMenu.className="active";                          
        }else{                                                                               //Sub menu Exist

            //Click the  menu which sub-menu is hide
            if(secondaryMenu.style.display == "none"){                             
                for (var i=0; i<secondaryMenus.length; i++){                            
                    secondaryMenus[i].style.display = "none";       //Hide all sub menu                     
                }
                secondaryMenu.style.display = "block";              //Display sub-menu u clicked             
                targetMenu.className="active";                            //Set target menu css class         
            }else{                                                  //Click the  menu which sub-menu is displayed   
                secondaryMenu.style.display = "none";               //Hide it    
                targetMenu.className="";    
            }
        }
        currentMenu = document.getElementById(obj);     //Set current menu (global variable)
    }
}

Ok, run it in your browser. it works fine, right?

Maybe additional css make appearance better

/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
#nav-secondary a:link {color:#000} 
#nav-secondary a:visited {color:#000} 
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link, 
#nav-secondary li.active li.active a:visited, 
#nav-secondary li.active li.active a:hover, 
#nav-secondary li.active li.active a:active {font-weight:bold}

These are the final snap in my FireFox2 and IE7