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.
 */
function CollapseButton(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) {
                CollapseButton(tables[i], header);
            }
        }
    }
}
addOnloadHook(createCollapseButtons);