First off this is not my creation, i got the original script and directions from some other site. I did however slightly modify it. I however will post the original as it is simple and i think its all thats needed to fix my problem.
What i need to know is if there is anyway that the same effect acheived with the code below can be done without using cookies? If it cannot be done this way without using cookies is there any method that will give me the same effect (starting off collapsed and allowing me to expand them) without cookies? the place im using this code will not allow me to use the code as it is because it somehow references the cookies.
heres all the code.
I had to first create a .js file with the following code in it.
Code:
/*
Expandable Listmenu Script
Author : Daniel Nolan
http://www.bleedingego.co.uk/webdev.php
*/
function initMenus() {
if (!document.getElementsByTagName) return;
var aMenus = document.getElementsByTagName("LI");
for (var i = 0; i < aMenus.length; i++) {
var mclass = aMenus[i].className;
if (mclass.indexOf("treenode") > -1) {
var submenu = aMenus[i].childNodes;
for (var j = 0; j < submenu.length; j++) {
if (submenu[j].tagName == "A") {
submenu[j].onclick = function() {
var node = this.nextSibling;
while (1) {
if (node != null) {
if (node.tagName == "UL") {
var d = (node.style.display == "none")
node.style.display = (d) ? "block" : "none";
this.className = (d) ? "treeopen" : "treeclosed";
return false;
}
node = node.nextSibling;
} else {
return false;
}
}
return false;
}
submenu[j].className = (mclass.indexOf("open") > -1) ? "treeopen" : "treeclosed";
}
if (submenu[j].tagName == "UL")
submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none";
}
}
}
}
window.onload = initMenus;
After creating that file, i was to use the following code in my page...
Code:
<head>
<title>..</title>
<script src="listmenu.js" type="text/javascript"></script>
</head>
At which point i could use the following code to structure the collapse/expandable menus...
Code:
<ul> <li class="treenode"> <a href="">Top Level Item</a> <ul> <li><a href="">List Item</a></li> <li><a href="">List Item</a></li> <li><a href="">List Item</a></li> <li><a href="">List Item</a></li> </ul> </li></ul>
Thanks guys. |
