MediaWiki:Citizen.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.

/* All JavaScript here will be loaded for users of the Citizen skin */

mw.hook('wikipage.content').add(function($content) {
    $content.find('.mw-headline').each(function() {
        var $header = $(this);
        var $section = $header.nextUntil('h2, h3, h4, h5, h6');

        if ($section.length) {
            // Wrap section content in a div
            $section.wrapAll('<div class="citizen-collapsed-section" style="display: none;"></div>');

            // Add toggle button
            var $toggle = $('<span class="citizen-toggle-button" style="cursor: pointer; margin-left: 10px;">[+]</span>');
            $header.append($toggle);

            // Toggle visibility on click
            $toggle.on('click', function() {
                var $wrapper = $(this).parent().next('.citizen-collapsed-section');
                $wrapper.toggle();
                $(this).text($wrapper.is(':visible') ? '[-]' : '[+]');
            });
        }
    });
});