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

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

/* Collapsed table (blue) */
$(document).ready(function() {
    // Function to apply or remove styles based on collapse state
    function applyStylesBasedOnCollapseState() {
        $('.mw-collapsible').each(function() {
            var $this = $(this);
            if ($this.hasClass('mw-collapsed')) {
                // Apply styles if the table is collapsed
                $this.find('.blue_header').css('border-radius', '15px 15px 15px 15px');
            } else {
                // Remove styles if the table is not collapsed
                $this.find('.blue_header').css('border-radius', '15px 15px 0px 0px');
            }
        });
    }

    // Apply styles based on initial collapse state on page load
    applyStylesBasedOnCollapseState();

    // Listen for the afterCollapse event to apply the styles
    $('.mw-collapsible').on('afterCollapse.mw-collapsible', function() {
        // Apply CSS to the .header element within the collapsed table
        $(this).find('.blue_header').css('border-radius', '15px 15px 15px 15px');
    });

    // Listen for the afterExpand event to revert the styles
    $('.mw-collapsible').on('afterExpand.mw-collapsible', function() {
        // Remove the CSS from the .header element when the table is expanded
        $(this).find('.blue_header').css('border-radius', '15px 15px 0px 0px'); 
    });
});

/* Collapsed table (green) */
$(document).ready(function() {
    // Function to apply or remove styles based on collapse state
    function applyStylesBasedOnCollapseState() {
        $('.mw-collapsible').each(function() {
            var $this = $(this);
            if ($this.hasClass('mw-collapsed')) {
                // Apply styles if the table is collapsed
                $this.find('.green_header').css('border-radius', '15px 15px 15px 15px');
            } else {
                // Remove styles if the table is not collapsed
                $this.find('.green_header').css('border-radius', '15px 15px 0px 0px');
            }
        });
    }

    // Apply styles based on initial collapse state on page load
    applyStylesBasedOnCollapseState();

    // Listen for the afterCollapse event to apply the styles
    $('.mw-collapsible').on('afterCollapse.mw-collapsible', function() {
        // Apply CSS to the .header element within the collapsed table
        $(this).find('.green_header').css('border-radius', '15px 15px 15px 15px');
    });

    // Listen for the afterExpand event to revert the styles
    $('.mw-collapsible').on('afterExpand.mw-collapsible', function() {
        // Remove the CSS from the .header element when the table is expanded
        $(this).find('.green_header').css('border-radius', '15px 15px 0px 0px'); 
    });
});
/* Map key */
$(document).ready(function() {
  // Toggle display of the collapsible key content
  $('.collapsible-key-header').click(function() {
    var $header = $(this); // Get the clicked header
    var $content = $header.next('.collapsible-key-content'); // Get the content next to the clicked header

    // Toggle the display of the content with callback to change icon after toggle completes
    $content.slideToggle(200, function() {
      // Change the expand/collapse icon based on the content visibility after the animation
      var $icon = $header.find('.expand-collapse-icon');
      if ($content.is(':visible')) {
        $icon.text('[-]'); // Change to collapse icon if content is visible
      } else {
        $icon.text('[+]'); // Change to expand icon if content is hidden
      }
    });
  });
});