slideToggle for one list item at a time

[Metal_head]

Hi

I am trying to create a side nav menu using a list. In this list, some list-items have sub list. When I click on such an item, I want the sub-items to appear using slideToggle.

The problem that I am facing is that, in my UL of 4 items 2nd and 3rd have sub-list, but when I am clicking on them I only see the 2nd item’s sub list not the3rd item’s sub list.

Can anyone correct this problem.

Code is located at http://jsfiddle.net/Metal_head/2e5Nf/

Regards
MH

[Metal_head]

Thanks a lot Chris.

[Metal_head]

One more problem…

Now I would like to replace this menu with another side menu that I had downloaded earlier, for a website that I am designing. Now that I know jQuery, I would like to add my menu.

But, when I replace the CSS and jQuery for this new menu (HTML is the same), the side nav menu gets distorted, takes up about 60% of width and the main content div gets pushed downward.

How the old menu looks like: https://docs.google.com/file/d/0B-mhigcuV7cUaWtNYmxUUnFMakE/edit

How its actually looking: https://docs.google.com/file/d/0B-mhigcuV7cUMm1MSVNsT0xMdDA/edit

How it flickers when I hover on the first link: https://docs.google.com/file/d/0B-mhigcuV7cUYkJIX2R4RG9FYk0/edit

Thanks
MH

[Metal_head]

old html

Automobile Engineering Curriculum



B.E. Automobile Engineering






Computer Engineering Curriculum



B.E. Computer Engineering


M.E. Computer Engineering










.

.

.

.

. so on for other branches

old css:

.sidenav {

display:block;

position: relative;

margin:0;

padding:0;

float: left;

width:15%;

height:auto;

min-height:700px;

margin-left:10%;

}





.menu {

margin-top:40px;

list-style: none;

width: 80%;

position: relative;

top:0px;

left: 0px;

padding: 0px 0 50px 0;

font-size:12px;

z-index:10;

}



li {

margin: 5px 0 0 0;

}



.menu li a {

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-ms-transition: opacity 0.3s ease-out;		/*IE10*/



background:#cbcbcb;

color: #000;

border:1px solid #a9a9a9;

border-left:none;

padding: 7px 15px 7px 15px;



width: 80%;

display: block;

text-decoration: none;

font-weight:bold;



}



.menu li a:hover {

color: #000;

padding: 7px 15px 7px 30px;

}



.menu ul li a{

margin-left:5px;

}



.menu ul{

list-style: none;

font-size:11px;

width:100%;

margin-left:10%;

}



.menu ul li a {

background:#ebebeb;

}



.hidden {display:none;}

old js is different, here it is:

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.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
oElement = arrElements;

if(oRegExp.test(oElement.className)){

arrReturnElements.push(oElement);

}

}

return (arrReturnElements)

}

};

toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});

[Author]

Posts