User:Amit6/JavaScript Collapsible List3.js

/* ---               functions to build the tree on document load --- */

function getRandomID { myRandomID = ''; for (irandom=0;irandom<10;irandom++) { p = Math.floor(Math.random*26); myRandomID += 'abcdefghijklmnopqrstuvwxyz'.substring(p,p+1); }   return myRandomID; }

function makeaqtree(ul,level) { var cn=ul.childNodes; var myReplacementNode = document.createElement("div"); // Walk through all LIs that are subordinate to this UL   for (var icn=0;icn 0) { alert("UL structure is invalid; a UL contains a text node: '"+cn[icn].nodeValue+"'"); return; }           } else { alert("UL structure is invalid; a UL contains something other than an LI (a "+cn[icn].nodeName+", in fact)"); return; }       }        // We know that the node we have now is an LI        // Walk through it and get all its content; add that content to a div // If the content contains a UL, then: //   call makeaqtree with the UL; this will create its content as a div and return that div //   our content div must get an onClick handler that shows/hides the id'ed div var contentNodes = cn[icn].childNodes; var thereIsASubMenu = 0; var subNodes = new Array; for (var icontentNodes=0;icontentNodes<contentNodes.length;icontentNodes++) { var thisContentNode = contentNodes[icontentNodes]; if (thisContentNode.nodeName == 'UL') { var subMenu = makeaqtree(thisContentNode,level+1); thereIsASubMenu = 1; } else { // get a copy of this node ready to add to our new tree subNodes[subNodes.length] = thisContentNode.cloneNode(true); }       }        // Create the container element to put all the subnodes in (we will then add this        //   container element to our new tree) // If there's a submenu, then the container element is an anchor; if not, it's a div if (thereIsASubMenu) { var containerDiv = document.createElement("div"); var containerElement = document.createElement("a"); containerDiv.appendChild(containerElement); containerElement.setAttribute("attachedsection",subMenu.getAttribute("id")); containerElement.setAttribute("href","#"); containerElement.onclick = aqtree2ToggleVisibility; containerElement.className = "aqtree2link"; var icon = document.createElement("span"); icon.innerHTML = aqtree2_expandMeHTML; icon.className = 'aqtree2icon'; icon.id = 'icon-'+subMenu.id; containerElement.appendChild(icon); } else { var containerElement = document.createElement("div"); var containerDiv = containerElement;

if (subNodes.length > 0) { var icon = document.createElement("span"); icon.innerHTML = aqtree2_bulletHTML; icon.className = 'aqtree2icon'; containerElement.appendChild(icon); }       }        // Add all subnodes to the container element for (isubNodes=0;isubNodes<subNodes.length;isubNodes++) { sN = subNodes[isubNodes]; if (sN.nodeName == '#text' && sN.nodeValue.replace(/[ \v\t\r\n]*/,'').length == 0) continue; containerElement.appendChild(sN); }       if (thereIsASubMenu) { // now add the submenu itself! containerDiv.appendChild(subMenu); }

myReplacementNode.appendChild(containerDiv); }   // generate a random ID    var randID = getRandomID; myReplacementNode.setAttribute("id",randID); myReplacementNode.style.display = 'none'; myReplacementNode.style.paddingLeft = (level*10)+'px'; // return our node return myReplacementNode; }

function makeaqtrees { // do it for each appropriate UL   uls = document.getElementsByTagName("ul"); for (iuls=0;iuls<uls.length;iuls++) { ULclassName = uls[iuls].className; if (ULclassName) { if (ULclassName.match(/\baqtree2\b/)) { returnNode = makeaqtree(uls[iuls],0); returnNode.style.display = 'block'; pn = uls[iuls].parentNode; pn.replaceChild(returnNode,uls[iuls]); }       }    } }

function initaqtrees { // Check the current browser has the spuds to do the work if (document.createElement &&       document.getElementsByTagName &&        RegExp &&        document.body.innerHTML) makeaqtrees; else return; }

window.onload = initaqtrees;

/* ---                   functions to handle the tree when working --- */

function aqtree2ToggleVisibility { elemID = this.getAttribute("attachedsection"); thisElem = document.getElementById(elemID); thisDisp = thisElem.style.display; thisElem.style.display = thisDisp == 'none' ? 'block' : 'none'; // change the icon icon = document.getElementById("icon-"+elemID); if (icon) icon.innerHTML = thisDisp == 'none' ? aqtree2_collapseMeHTML : aqtree2_expandMeHTML; return false; }

/* ---                required data -- override this in the page if you want --- */

aqtree2_expandMeHTML = ''; aqtree2_collapseMeHTML = ''; aqtree2_bulletHTML = '';