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<cn.length;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<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 = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Plus%2B.svg/10px-Plus%2B.svg.png" border="0" width="10" height="10"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="8" height="8">';
aqtree2_collapseMeHTML = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Minus-.svg/10px-Minus-.svg.png" border="0" width="10" height="10"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="8" height="8">';
aqtree2_bulletHTML = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Color_icon_black.svg/8px-Color_icon_black.svg.png" border="0" width="8" height="8"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="8" height="8">';

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.