MediaWiki:Mobile.js

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* Any JavaScript here will be loaded for users using the mobile site */

// https://phabricator.wikimedia.org/T191596
mw.loader.using('mobile.site.styles');

/**
 * Replicate the collapsible behavior on headings with the "imitation" class.
 *
 * Not an ideal solution, but `h2` elements generated by Scribunto are added
 * after MobileFrontEnd processes page content and makes headings collapsible.
 */
// Find all headings with the imitation class and loop through them.
Array.from(
	document.getElementsByClassName('collapsible-heading--imitation')
).forEach(function (el) {
	// Add an event listener to each heading
	return el.addEventListener('click', function (ev) {
		// The heading is the element that was clicked on.
		var header = ev.currentTarget;

		// The section is the next element.
		var section = header.nextSibling;

		// Don't continue if the section doesn't have the appropriate class.
		if (!section.classList.contains('collapsible-block--imitation')) {
			return;
		}

		// Check if the section is already visible.
		var currentlyVisible = section.classList.contains('open-block');

		// Toggle the header and section to the opposite of their current state.
		header.classList.toggle('open-block', !currentlyVisible);
		section.classList.toggle('open-block', !currentlyVisible);
		section.attr('aria-expanded', !currentlyVisible);
	});
});