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

// Check for validity

if (cn[icn].nodeName.toUpperCase() != 'LI') {

if (cn[icn].nodeName == '#text') {

var isBlankNV = cn[icn].nodeValue.replace(/[\f\n\r\t\v ]*/,'');

if (isBlankNV.length > 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

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

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

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 = '';