MediaWiki:Common.js/collapsibletables.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

// =====================================================================
// Collapsible Tables
//
// Description: Allows tables to be collapsed, showing only the header.
// Reference:   [[Wikipedia:Wikipedia:NavFrame]]
//              [[Wikipedia:Help:Collapsing]]
// Maintainers: [[Wikipedia:User:R. Koot]]
//
// FROM RUNESCAPE WIKI. http://runescape.wikia.com/
// =====================================================================
 
    function collapseTable(tableIndex) {
        var Button = document.getElementById("collapseButton" + tableIndex);
        var Table = document.getElementById("collapsibleTable" + tableIndex);
        if (!Table || !Button) return false;
 
        var Rows = Table.getElementsByTagName("tr"); 
  
        if (Button.firstChild.data == collapseCaption) {
            for (var i = 1; i < Rows.length; i++) {
                Rows[i].style.display = "none";
            }
            Button.firstChild.data = expandCaption;
        } else {
          for (var i = 1; i < Rows.length; i++) {
              Rows[i].style.display = Rows[0].style.display;
          }
          Button.firstChild.data = collapseCaption;
        }
    }
 
    function createCollapseButtons() {
        var tableIndex = 0;
        var navBoxes = new Object();
        var Tables = document.getElementsByTagName("table");
 
        for (var i = 0; i < Tables.length; i++) {
            if (hasClass(Tables[i], "collapsible")) {
 
                /* Only add button and increment count if there is a header row to work with */
                var HeaderRow = Tables[i].getElementsByTagName("tr")[0];
                if (!HeaderRow) continue;

                var Header = HeaderRow.getElementsByTagName("th")[0];
                if (!Header) continue;

                navBoxes[tableIndex] = Tables[i];
                Tables[i].setAttribute("id", "collapsibleTable" + tableIndex);
 
                var Button     = document.createElement("span");
                var ButtonLink = document.createElement("a");
                var ButtonText = document.createTextNode(collapseCaption);
 
                Button.style.styleFloat = "right";
                Button.style.cssFloat = "right";
                Button.style.fontSize = "90%";
                Button.style.fontWeight = "normal";
                Button.style.textAlign = "right";
                Button.style.width = "6em";
 
                ButtonLink.style.color = Header.style.color;
                ButtonLink.setAttribute("id", "collapseButton" + tableIndex);
                ButtonLink.setAttribute("href", "javascript:collapseTable(" + tableIndex + ");");
                ButtonLink.appendChild(ButtonText);
 
                Button.appendChild(document.createTextNode("["));
                Button.appendChild(ButtonLink);
                Button.appendChild(document.createTextNode("]"));
 
                Header.insertBefore(Button, Header.childNodes[0]);
                tableIndex++;
            }
        }
 
        var j = 0;
        for (var i = 0;  i < tableIndex; i++) {  
            if (hasClass(navBoxes[i], "navbox") && hasClass(navBoxes[i], "collapsible") && hasClass(navBoxes[i], "autocollapse")) j++;

            var h = 0;
            if (hasClass(navBoxes[i], "navbox") && hasClass(navBoxes[i], "collapsible")) h = navBoxes[i].clientHeight;
            if(h == null || h == undefined) h = 0;

            // Does not collapse if:
            //   Contains "uncollapsed"
 
            // Collapses if:
            //   1. Contains "collapsed"
            //   2. If j>autoCollapse, and contains "navbox collapsible autocollapse"
            //   3. If table height > maxHeight, and contains "navbox collapsible"
            //   4. If there are "innercollapse" tables in "outercollapse" tables
 
            if (!hasClass(navBoxes[i], "uncollapsed")) {
                if (hasClass(navBoxes[i], "collapsed") || (j > autoCollapse) || (h > maxHeight)) {
                    collapseTable(i);
                }
                else if (hasClass(navBoxes[i], "innercollapse")) {
                    var element = navBoxes[i];
                    while (element = element.parentNode) {
                        if (hasClass(element, "outercollapse")) {
                            collapseTable(i);
                            break;
                        }
                    }
                }
            }
        }
    }

    addOnloadHook(createCollapseButtons);

// =====================================================================
// End of Collapsible Tables
// =====================================================================