I've been using Travis's Expanding Menu
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
working on. The problem is I need to add some functionality to it.
I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.
I though i'd got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.
Any javascript experts out there fancy helping me out? Code posted
below...
// Node Functions
if(!window.Node ){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] ||
node.nodeName.t oUpperCase() == filter.toUpperC ase());
}
function getChildren(nod e, filter){
var result = new Array();
var children = node.childNodes ;
for(var i = 0; i < children.length ; i++){
if(checkNode(ch ildren[i], filter))
result[result.length] = children[i];
}
return result;
}
function getChildrenByEl ement(node){
return getChildren(nod e, "ELEMENT_NODE") ;
}
function getFirstChild(n ode, filter){
var child;
var children = node.childNodes ;
for(var i = 0; i < children.length ; i++){
child = children[i];
if(checkNode(ch ild, filter)) return child;
}
return null;
}
function getFirstChildBy Text(node){
return getFirstChild(n ode, "TEXT_NODE" );
}
function getNextSibling( node, filter){
for(var sibling = node.nextSiblin g; sibling != null; sibling =
sibling.nextSib ling){
if(checkNode(si bling, filter)) return sibling;
}
return null;
}
function getNextSiblingB yElement(node){
return getNextSibling( node, "ELEMENT_NODE") ;
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu(){
if(activeMenu){
activeMenu.clas sName = "";
getNextSiblingB yElement(active Menu).style.dis play =
"none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingB yElement(this). style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByEl ement(document. getElementById( "menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildBy Text(menu);
a = document.create Element("a");
menu.replaceChi ld(a, text);
a.appendChild(t ext);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this .blur()};
}
}
// ||||||||||||||| ||||||||||||||| ||||||||||||||| |||||
if(document.cre ateElement) window.onload = initMenu;
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
working on. The problem is I need to add some functionality to it.
I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.
I though i'd got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.
Any javascript experts out there fancy helping me out? Code posted
below...
// Node Functions
if(!window.Node ){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] ||
node.nodeName.t oUpperCase() == filter.toUpperC ase());
}
function getChildren(nod e, filter){
var result = new Array();
var children = node.childNodes ;
for(var i = 0; i < children.length ; i++){
if(checkNode(ch ildren[i], filter))
result[result.length] = children[i];
}
return result;
}
function getChildrenByEl ement(node){
return getChildren(nod e, "ELEMENT_NODE") ;
}
function getFirstChild(n ode, filter){
var child;
var children = node.childNodes ;
for(var i = 0; i < children.length ; i++){
child = children[i];
if(checkNode(ch ild, filter)) return child;
}
return null;
}
function getFirstChildBy Text(node){
return getFirstChild(n ode, "TEXT_NODE" );
}
function getNextSibling( node, filter){
for(var sibling = node.nextSiblin g; sibling != null; sibling =
sibling.nextSib ling){
if(checkNode(si bling, filter)) return sibling;
}
return null;
}
function getNextSiblingB yElement(node){
return getNextSibling( node, "ELEMENT_NODE") ;
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu(){
if(activeMenu){
activeMenu.clas sName = "";
getNextSiblingB yElement(active Menu).style.dis play =
"none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingB yElement(this). style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByEl ement(document. getElementById( "menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildBy Text(menu);
a = document.create Element("a");
menu.replaceChi ld(a, text);
a.appendChild(t ext);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this .blur()};
}
}
// ||||||||||||||| ||||||||||||||| ||||||||||||||| |||||
if(document.cre ateElement) window.onload = initMenu;
Comment