MediaWiki:Common.js

mw.loader.load( 'https://pro.fontawesome.com/releases/v5.1.0/css/all.css', 'text/css' );
mw.loader.load( 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.4/jquery.fancybox.css', 'text/css' );
mw.loader.load( 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.4/jquery.fancybox.js' );

$(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");
    });
});