MediaWiki:Common.js

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

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}    

docReady(collapsibleHeadings);

function collapsibleHeadings() {

  // Get all the <h2> headings
  var headings = document.querySelectorAll('main h2');
  Array.prototype.forEach.call(headings, function (heading) {
    // Give each <h2> a toggle button child
    // with the SVG plus/minus icon
    heading.innerHTML = "\n      <button aria-expanded=\"false\">\n        ".concat(heading.textContent, "\n        <svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 10 10\">\n          <rect class=\"vert\" height=\"8\" width=\"2\" y=\"1\" x=\"4\"/>\n          <rect height=\"2\" width=\"8\" y=\"4\" x=\"1\"/>\n        </svg>\n      </button>\n    "); // Function to create a node list 
    // of the content between this <h2> and the next

    var getContent = function getContent(elem) {
      var elems = [];

      while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'H2') {
        elems.push(elem.nextElementSibling);
        elem = elem.nextElementSibling;
      } // Delete the old versions of the content nodes


      elems.forEach(function (node) {
        node.parentNode.removeChild(node);
      });
      return elems;
    }; // Assign the contents to be expanded/collapsed (array)


    var contents = getContent(heading); // Create a wrapper element for `contents` and hide it

    var wrapper = document.createElement('div');
    wrapper.hidden = true; // Add each element of `contents` to `wrapper`

    contents.forEach(function (node) {
      wrapper.appendChild(node);
    }); // Add the wrapped content back into the DOM 
    // after the heading

    heading.parentNode.insertBefore(wrapper, heading.nextElementSibling); // Assign the button

    var btn = heading.querySelector('button');

    btn.onclick = function () {
      // Cast the state as a boolean
      var expanded = btn.getAttribute('aria-expanded') === 'true' || false; // Switch the state

      btn.setAttribute('aria-expanded', !expanded); // Switch the content's visibility

      wrapper.hidden = expanded;
    };
  });
};