I have a code that I got from a site to make an expandable menu. It is a great code that I have adapted for my site. However, now I want to modify the code so that the menu starts out being expanded on the category that you are within. I have attached the Javascript portion of the code. The menu is in the form of a list, so a sample code would be. In this example, if you were on the page that corresponded to “Sub Cat 1”, Category 1 would start out expanded when the page loads.
I can do the rest of the code if someone modifies it so that the pages loads with a certain category open every time no matter what page you are on.
<li>Category 1
<ol>
<li ><a href=’subcategory 1′>Sub Cat 1</a></li>
<li ><a href=’subcategory 2′>Sub Cat 2</a></li>
<li ><a href=’subcategory 3′>Sub Cat 3</a></li>
</ol>
</li>
Here is the Javascript:
<script type=”text/javascript”>
// <!– Begin
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// Coded by Travis Beckham
// [url]http://www.squidfingers.com[url]http://www.podlob.com
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// — version date: 06/02/03 ———————————————————
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// 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.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, ‘ELEMENT_NODE’);
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, ‘TEXT_NODE’);
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, ‘ELEMENT_NODE’);
}
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Menu Functions & Properties
var activeMenu = null;
function showMenu(){
if(activeMenu){
activeMenu.className = ”;
getNextSiblingByElement(activeMenu).style.display = ‘none’;
}
if(this == activeMenu){
activeMenu = null;
}else{
getNextSiblingByElement(this).style.display = ‘block’;
activeMenu = this;
this.classname = ‘active’;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById(‘menu’));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement(‘a’);
menu.replaceChild(a, text);
a.appendChild(text);
a.href = ‘#’;
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
// ||||||TEST|||||||||TEST|||||||TEST|||||||TEST|||||||
if(document.createElement)
{
window.onload = initMenu;
}
// End –>
</script>