User:HyperNervie/sandbox

Input these in your browser console:

mw.hook("wikipage.content").add(function ($content) {
	$content.find(".rhwiki-tabberneue").each(function (_, tabberDiv) {
		$(tabberDiv)
			.children(".rhwiki-tabberneue-menu")
			.children(".rhwiki-tabberneue-label")
			.each(function (_, labelDiv) {
				$(labelDiv).on("click", clickOnLabel);
			});
	});
	function clickOnLabel() {
		const $this = $(this);
		if ($this.hasClass("selected")) return;

		const $tabber = $this.closest(".rhwiki-tabberneue");
		if ($tabber.length === 0) return;

		const $labels = $tabber
			.children(".rhwiki-tabberneue-menu")
			.children(".rhwiki-tabberneue-label");
		const selected = $labels.index($this);
		if (selected < 0) return;

		const $panels = $tabber
			.children(".rhwiki-tabberneue-content")
			.children(".rhwiki-tabberneue-panel");
		for (let i = 0; i < $labels.length && i < $panels.length; i++)
			if (i === selected) {
				$($labels[i]).addClass("selected");
				$($panels[i]).removeClass("hidden");
			} else {
				$($labels[i]).removeClass("selected");
				$($panels[i]).addClass("hidden");
			}
	}
});

---

Current "TabStart-content-TabEnd" solution renders a series of pairs of label and panel. Before MediaWiki:Gadget-Tabber.js is loaded, all panels are visible. In extreme cases where the script fails to load, the panels are left there forever.

---

Here we have only one visible panel at the beginning, and the labels are styled properly so that when MediaWiki:Gadget-Tabber.js loads, there won't be any change to page appearance. Even if the script doesn't load successfully, readers just can't switch panels by clicking on labels.