MediaWiki:Collapsible.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: Clear the cache in Tools → Preferences

/**
 * Code for collapsible tables.
 */
var CollapseButton = Class.extend({
    init: function(table, header) {
        var spacer = document.createElement('div');
        spacer.style.cssFloat = 'left';
        spacer.style.styleFloat = 'left';
        spacer.style.textAlign = 'left';
        spacer.style.width = '35px';
        spacer.appendChild(document.createTextNode('\u00a0'));
        header.insertBefore(spacer, header.childNodes[0]);

        var button = document.createElement('div');
        button.style.cssFloat = 'right';
        button.style.styleFloat = 'right';
        button.style.fontSize = '11px';
        button.style.fontWeight = 'normal';
        button.style.textAlign = 'right';
        button.style.width = '35px';
        button.onclick = function() {
            if (this.firstChild.data == '[hide]') {
                for (var i = 1; i < table.rows.length; i++) {
                    table.rows[i].style.display = 'none';
                }
                this.firstChild.data = '[show]';
            } else {
                for (var i = 1; i < table.rows.length; i++) {
                    table.rows[i].style.display = table.rows[0].style.display;
                }
                this.firstChild.data = '[hide]';
            }
        };
        button.onmouseover = function() {
            this.style.cursor = 'pointer';
        };
        button.appendChild(document.createTextNode('[hide]'));
        header.insertBefore(button, header.childNodes[0]);
    }
});

function createCollapseButtons() {
    var tables = getElementsByClassName(document, 'table', 'collapsible');

    for (var i = 0; i < tables.length; i++) {
        var headerRow = tables[i].getElementsByTagName('tr')[0];
        if (headerRow) {
            var header = headerRow.getElementsByTagName('th')[0];
            if (header) {
                new CollapseButton(tables[i], header);
            }
        }
    }
}
addOnloadHook(createCollapseButtons);