How do I extend the functionality of the attached script to collapse one submenus when a new one is expanded

Christie_M
Christie_M used Ask the Experts™
on
I'm struggling to adapt the java script code below so that when you click to open one sub menu, all other submenus close. i.e. there can only be one sub menu open at any one time.

Next challenge:  I need to make one of the submenus start expanded depending upon the page URL. i.e. for all pages in category 1 (e.g. /category-1/submenu-a.html)  the category 1 sub menu should be displayed by default when the page loads.

Hope you can help.
------------------CSS--------------------
.menu,
.menu ul {
	margin:0;
	padding:0;
	list-style:none;
}
.menu {width:200px;}
.menu li {
	margin:0;
	padding:0;
	margin-bottom:1px;
}
.menu a {
	display:block;
	padding:2px 5px;
	color:#000;
	background:#b0c23d;
	text-decoration:none;
}
.menu a:hover {background:#d9dcb0;}
.menu ul li {padding-left:15px;}
.menu ul a {background:#ced174;}
.hidden {display:none;}
 
------------------HTML-------------------
<ul class="mc_menu">
    <li><a href="#">Category 1</a>
        <ul>
        <li><a href="#">Submenu 1a</a></li>
        <li><a href="#">Submenu 1b</a></li>
    </ul>
    </li>
    <li><a href="#">Category 2</a>
        <ul>
        <li><a href="#">Submenu 2a</a></li>
        <li><a href="#">Submenu 2b</a></li>
        </ul>
    </li>
    <li><a href="#">Category 3</a>
    </li>
</ul>
 
 
 
<ul class="menu">
    <li><a href="#">Category 1</a>
        <ul>
        <li><a href="#">Submenu 1a</a></li>
        <li><a href="#">Submenu 1b</a></li>
    </ul>
    </li>
    <li><a href="#">Category 2</a>
        <ul>
        <li><a href="#">Submenu 2a</a></li>
        <li><a href="#">Submenu 2b</a></li>
        </ul>
    </li>
    <li><a href="#">Category 3</a>
    </li>
</ul>
------------------JAVA SCRIPT--------------------
 
var toggleMenu = {
	init : function(sContainerClass, sHiddenClass) {
		if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
		var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
		var arrSubMenus, oSubMenu, oLink;
		for (var i = 0; i < arrMenus.length; i++) {
			arrSubMenus = arrMenus[i].getElementsByTagName('ul');
			for (var j = 0; j < arrSubMenus.length; j++) {
				oSubMenu = arrSubMenus[j];
				oLink = oSubMenu.parentNode.getElementsByTagName('a')[0];
				oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
				this.toggle(oSubMenu, sHiddenClass);
			}
		}
	},
	toggle : function(el, sHiddenClass) {
		var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
		el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
	},
 
	addEvent : function(obj, type, fn) {
		if (obj.addEventListener)
			obj.addEventListener(type, fn, false);
		else if (obj.attachEvent) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {obj["e"+type+fn](window.event);}
			obj.attachEvent("on"+type, obj[type+fn]);
		}
	},
/*
 
*/
	getElementsByClassName : function(oElm, strTagName, strClassName){
	    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
	    var arrReturnElements = new Array();
	    strClassName = strClassName.replace(/\-/g, "\\-");
	    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	    var oElement;
	    for(var i=0; i<arrElements.length; i++){
	        oElement = arrElements[i];      
	        if(oRegExp.test(oElement.className)){
	            arrReturnElements.push(oElement);
	        }   
	    }
	    return (arrReturnElements)
	}
};
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Expert
Top Expert 2009
Commented:
Not simple

I tried

                                oLink.onclick = function(){toggleMenu.toggle(this,this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
                                this.toggle(oLink,oSubMenu, sHiddenClass);



                if (saveMenu!=null && link!=saveMenu) saveMenu.click();
                saveMenu = link;

but no dice

Michel PlungjanIT Expert
Top Expert 2009

Commented:
So you found out how?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial