MediaWiki:Common.js

mw.loader.load( 'https://pro.fontawesome.com/releases/v5.1.0/css/all.css', 'text/css' );

var d = document.getElementById("age2009");
d.className += " show";

document.getElementById("showAge2009").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2009").addClass("show");
};

document.getElementById("showAge2010").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2010").addClass("show");
};

document.getElementById("showAge2011").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2011").addClass("show");
};

document.getElementById("showAge2012").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2012").addClass("show");
};

document.getElementById("showAge2013").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2013").addClass("show");
};

document.getElementById("showAge2014").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2014").addClass("show");
};

document.getElementById("showAge2015").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2015").addClass("show");
};

document.getElementById("showAge2016").onclick = function() {
$(".agegraph").removeClass("show");
$("#age2016").addClass("show");
};






var d = document.getElementById("nation2009");
d.className += " show";

document.getElementById("showNation2009").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2009").addClass("show");
};

document.getElementById("showNation2010").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2010").addClass("show");
};

document.getElementById("showNation2011").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2011").addClass("show");
};

document.getElementById("showNation2012").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2012").addClass("show");
};

document.getElementById("showNation2013").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2013").addClass("show");
};

document.getElementById("showNation2014").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2014").addClass("show");
};

document.getElementById("showNation2015").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2015").addClass("show");
};

document.getElementById("showNation2016").onclick = function() {
$(".nationgraph").removeClass("show");
$("#nation2016").addClass("show");
};






var d = document.getElementById("center2009");
d.className += " show";

document.getElementById("showCenter2009").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2009").addClass("show");
};

document.getElementById("showCenter2010").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2010").addClass("show");
};

document.getElementById("showCenter2011").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2011").addClass("show");
};

document.getElementById("showCenter2012").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2012").addClass("show");
};

document.getElementById("showCenter2013").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2013").addClass("show");
};

document.getElementById("showCenter2014").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2014").addClass("show");
};

document.getElementById("showCenter2015").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2015").addClass("show");
};

document.getElementById("showCenter2016").onclick = function() {
$(".centergraph").removeClass("show");
$("#center2016").addClass("show");
};







$(document).ready(function(){
	$('.gendergraph:first-child').addClass("show");
	$('.ShowGender').click(function(){
		$('.gendergraph').removeClass("show");
		var genderindex = $(this).index() + 1;
		$('.gendergraph:nth-child(' + genderindex + ')').addClass("show");
    });
	$('.agegraph:first-child').addClass("show");
	$('.ShowAge').click(function(){
		$('.agegraph').removeClass("show");
		var ageindex = $(this).index() + 1;
		$('.agegraph:nth-child(' + ageindex + ')').addClass("show");
    });

	$('.nationgraph:first-child').addClass("show");
	$('.ShowNation').click(function(){
		$('.nationgraph').removeClass("show");
		var nationindex = $(this).index() + 1;
		$('.nationgraph:nth-child(' + nationindex + ')').addClass("show");
    });

	$('.centergraph:first-child').addClass("show");
	$('.ShowCenter').click(function(){
		$('.centergraph').removeClass("show");
		var centerindex = $(this).index() + 1;
		$('.centergraph:nth-child(' + centerindex + ')').addClass("show");
    });

	$('.ShowAll').click(function(){
		$(".gendergraph, .agegraph, .nationgraph, .centergraph").removeClass("show");
		var yearindex = $(this).index() + 1;
		$('.gendergraph:nth-child(' + yearindex + ')').addClass("show");
		$('.agegraph:nth-child(' + yearindex + ')').addClass("show");
		$('.nationgraph:nth-child(' + yearindex + ')').addClass("show");
		$('.centergraph:nth-child(' + yearindex + ')').addClass("show");
    });
});



// Loading jQuery seems to only work here ¯\_(ツ)_/¯
mw.loader.load( 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' );