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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

$(document).ready(function() {

    // Process h4 headings first (deepest level)
    $('.mw-parser-output h4').each(function() {
        var $heading = $(this);

        if ($heading.hasClass('section-collapsible')) return;

        var $content = $heading.nextUntil('h1, h2, h3, h4');
        if ($content.length === 0) return;

        $content.wrapAll('<div class="section-content level-4"></div>');

        $heading.find('.mw-headline').prepend('<span class="section-arrow" style="font-size: 12px;">▶</span> ');
        $heading.addClass('section-collapsible section-collapsed level-4')
                .css('cursor', 'pointer');

        $heading.next('.section-content').hide();

        $heading.on('click', function(e) {
            if ($(e.target).closest('.mw-editsection').length) return;
            e.preventDefault();

            var $this = $(this);
            var $content = $this.next('.section-content');
            var $arrow = $this.find('.section-arrow');

            if ($this.hasClass('section-collapsed')) {
                $content.slideDown(200);
                $this.removeClass('section-collapsed').addClass('section-expanded');
                $arrow.text('▼');
            } else {
                $content.slideUp(200);
                $this.removeClass('section-expanded').addClass('section-collapsed');
                $arrow.text('▶');
            }
        });
    });

    // Process h3 headings (middle level)
    $('.mw-parser-output h3').each(function() {
        var $heading = $(this);

        if ($heading.hasClass('section-collapsible')) return;

        var $content = $heading.nextUntil('h1, h2, h3');
        if ($content.length === 0) return;

        $content.wrapAll('<div class="section-content level-3"></div>');

        $heading.find('.mw-headline').prepend('<span class="section-arrow" style="font-size: 14px;">▶</span> ');
        $heading.addClass('section-collapsible section-collapsed level-3')
                .css('cursor', 'pointer');

        $heading.next('.section-content').hide();

        $heading.on('click', function(e) {
            if ($(e.target).closest('.mw-editsection').length) return;
            e.preventDefault();

            var $this = $(this);
            var $content = $this.next('.section-content');
            var $arrow = $this.find('.section-arrow');

            if ($this.hasClass('section-collapsed')) {
                $content.slideDown(200);
                $this.removeClass('section-collapsed').addClass('section-expanded');
                $arrow.text('▼');
            } else {
                $content.slideUp(200);
                $this.removeClass('section-expanded').addClass('section-collapsed');
                $arrow.text('▶');
            }
        });
    });

    // Process h2 headings last (top level)
    $('.mw-parser-output h2').each(function() {
        var $heading = $(this);

        // Skip if already processed
        if ($heading.hasClass('section-collapsible')) return;

        // Get content between this h2 and the next h1 or h2
        var $content = $heading.nextUntil('h1, h2');
        if ($content.length === 0) return;

        // Wrap content in a div
        $content.wrapAll('<div class="section-content level-2"></div>');

        // Add large arrow and make clickable
        $heading.find('.mw-headline').prepend('<span class="section-arrow" style="font-size: 16px;">▶</span> ');
        $heading.addClass('section-collapsible section-collapsed level-2')
                .css('cursor', 'pointer');

        // Hide content initially
        $heading.next('.section-content').hide();

        // Click handler
        $heading.on('click', function(e) {
            if ($(e.target).closest('.mw-editsection').length) return;
            e.preventDefault();

            var $this = $(this);
            var $content = $this.next('.section-content');
            var $arrow = $this.find('.section-arrow');

            if ($this.hasClass('section-collapsed')) {
                $content.slideDown(200);
                $this.removeClass('section-collapsed').addClass('section-expanded');
                $arrow.text('▼');
            } else {
                $content.slideUp(200);
                $this.removeClass('section-expanded').addClass('section-collapsed');
                $arrow.text('▶');
            }
        });
    });
});