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.
/* Any JavaScript here will be loaded for all users on every page load. */
// I wasn't totally satisfied with MediaWiki's built-in way to make collapsible elements, so here is an alternative implementation I made.
function customcollapseShow(jQueryObj) {
let container = $(jQueryObj).parents(".customcollapse");
container.find(".customcollapse-content").show();
container.find(".customcollapse-show").hide().removeAttr("aria-expanded");
container.find(".customcollapse-hide").show().attr("aria-expanded", "true");
container.find(".customcollapse-toggle").each(function () {
$(this).attr("aria-expanded", "true");
if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext"));
});
}
function customcollapseHide(jQueryObj) {
let container = $(jQueryObj).parents(".customcollapse");
container.find(".customcollapse-content").hide();
container.find(".customcollapse-hide").hide().removeAttr("aria-expanded");
container.find(".customcollapse-show").show().attr("aria-expanded", "false");
container.find(".customcollapse-toggle").each(function () {
$(this).attr("aria-expanded", "false");
if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext"));
});
}
if ($(".customcollapse").length > 0) {
$(".customcollapse").each(function () {
if ($(this).hasClass("collapsed")) {
$(this).find(".customcollapse-content").hide();
$(this).find(".customcollapse-hide").hide();
$(this).find(".customcollapse-show").show().attr("aria-expanded", "false");
$(this).find(".customcollapse-toggle").each(function () {
$(this).attr("aria-expanded", "false");
if ($(this).attr("data-showtext")) $(this).text($(this).attr("data-showtext"));
});
} else {
$(this).find(".customcollapse-show").hide();
$(this).find(".customcollapse-hide").show().attr("aria-expanded", "true");
$(this).find(".customcollapse-toggle").each(function () {
$(this).attr("aria-expanded", "true");
if ($(this).attr("data-hidetext")) $(this).text($(this).attr("data-hidetext"));
});
}
$(this).find(".customcollapse-toggle").each(function () {
// For toggles, changing the element to a <button>. This necessitates removing the element and adding it back again
$(this).addClass("plainbutton");
let innerHtml = this.innerHTML;
let attributes = this.attributes;
let btn = document.createElement("button");
btn.innerHTML = innerHtml;
for (let attr of attributes) {
btn.attributes.setNamedItem(attr.cloneNode());
}
$(this).replaceWith(btn);
});
});
// Define a toggle element with class="customcollapse-toggle"
// These are simple text-only toggles that the script will modify. To make more custom ones, use customcollapse-show and customcollapse-hide classes
$(".customcollapse-toggle").on("click", function () {
if ($(this).attr("aria-expanded") == "true") customcollapseHide(this);
else customcollapseShow(this);
});
// Define a show element with class="customcollapse-show"
$(".customcollapse-show").on("click", customcollapseShow);
// Define a hide element with class="customcollapse-hide"
$(".customcollapse-hide").on("click", customcollapseHide);
}