MediaWiki:Common.js: Difference between revisions
Appearance
Created page with "→Creature Infobox Image Toggle: (function () { function initCreatureInfoboxes() { document.querySelectorAll('.infobox-creature').forEach(function (box) { var tabs = box.querySelectorAll('.ci-tab'); var imgs = box.querySelectorAll('.ci-img'); tabs.forEach(function (tab, index) { tab.addEventListener('click', function () { // Hide all images, deactivate all tabs img..." |
No edit summary |
||
| Line 3: | Line 3: | ||
function initCreatureInfoboxes() { | function initCreatureInfoboxes() { | ||
document.querySelectorAll('.infobox-creature').forEach(function (box) { | document.querySelectorAll('.infobox-creature').forEach(function (box) { | ||
var | var femTab = box.querySelector('.ci-fem-tab'); | ||
var | var maleTab = box.querySelector('.ci-male-tab); | ||
var femaleImg = box.querySelector('.fem-creature-img'); | |||
var maleImg = box.querySelector('.male-creature-img'); | |||
femTab.addEventListener('click', function() { | |||
// hide male img, show fem | |||
femaleImg.style.display = 'block'; | |||
maleImg.style.display = 'none'; | |||
femTab.style.classList.toggle('ci-tab-active'); | |||
maleTab.style.classList.toggle('ci-tab-active'); | |||
}); | |||
maleTab .addEventListener('click', function() { | |||
// hide male img, show fem | |||
femaleImg.style.display = 'none'; | |||
maleImg.style.display = 'block'; | |||
femTab.style.classList.toggle('ci-tab-active'); | |||
maleTab.style.classList.toggle('ci-tab-active'); | |||
}); | }); | ||
}); | }); | ||
Revision as of 15:23, 18 April 2026
/* Creature Infobox Image Toggle */
(function () {
function initCreatureInfoboxes() {
document.querySelectorAll('.infobox-creature').forEach(function (box) {
var femTab = box.querySelector('.ci-fem-tab');
var maleTab = box.querySelector('.ci-male-tab);
var femaleImg = box.querySelector('.fem-creature-img');
var maleImg = box.querySelector('.male-creature-img');
femTab.addEventListener('click', function() {
// hide male img, show fem
femaleImg.style.display = 'block';
maleImg.style.display = 'none';
femTab.style.classList.toggle('ci-tab-active');
maleTab.style.classList.toggle('ci-tab-active');
});
maleTab .addEventListener('click', function() {
// hide male img, show fem
femaleImg.style.display = 'none';
maleImg.style.display = 'block';
femTab.style.classList.toggle('ci-tab-active');
maleTab.style.classList.toggle('ci-tab-active');
});
});
}
// Run after the DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCreatureInfoboxes);
} else {
initCreatureInfoboxes();
}
}());