MediaWiki:Common.js

Note: After publishing, 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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

/* Collapsible sidebar functionality */
$(document).ready(function() {
    // Initialize collapsible elements
    $('.mw-collapsible').each(function() {
        var $this = $(this);
        var $content = $this.find('.mw-collapsible-content');
        var $header = $this.prev();

        // Create toggle button
        var $toggleBtn = $('<span class="mw-collapsible-toggle">[+]</span>');

        // Add toggle button to header
        if ($header.length && $header.is('li')) {
            $header.append(' ').append($toggleBtn);
        } else {
            $this.before($('<div class="mw-collapsible-header"></div>').append($toggleBtn));
        }

        // Set initial state
        if ($this.hasClass('mw-collapsed')) {
            $content.hide();
            $toggleBtn.text('[+]');
        } else {
            $content.show();
            $toggleBtn.text('[-]');
        }

        // Toggle functionality
        $toggleBtn.click(function(e) {
            e.preventDefault();
            e.stopPropagation();

            if ($content.is(':visible')) {
                $content.slideUp();
                $toggleBtn.text('[+]');
                $this.addClass('mw-collapsed');
            } else {
                $content.slideDown();
                $toggleBtn.text('[-]');
                $this.removeClass('mw-collapsed');
            }
        });
    });
});

/* Additional CSS for better styling */
mw.loader.using('mediawiki.util', function() {
    mw.util.addCSS(`
        .mw-collapsible-toggle {
            cursor: pointer;
            font-weight: bold;
            color: #0645ad;
            margin-left: 5px;
        }

        .mw-collapsible-toggle:hover {
            text-decoration: underline;
        }

        .mw-collapsible-content {
            margin-top: 5px;
        }

        .mw-collapsible.mw-collapsed .mw-collapsible-content {
            display: none;
        }
    `);
});