User:Chao/common.js

/** * Custom tabs * * It will open and close tabs on the page with the corresponding hash. * If there is no change in hash (ie you are repeatedly clickin the same tab), * then it will toggle the tab open and closed. * This assumes that each tab's title has a hash that can be jumped to. */

function hideAllTabDetails { var tab = document.getElementsByClassName('cathedral-tab'); if (tab){ for (i = 0; i < tab.length; i++) tab[i].className = tab[i].className.replace(/\bselected\b/g, ""); }	tab = document.getElementsByClassName('cathedral-details'); if (tab){ for (i = 0; i < tab.length; i++) tab[i].style.display = "none"; } } function getTab(id){ var links = document.getElementsByClassName('cathedral-tab'); for (i = 0; i < links.length; i++) { a = links[i].firstChild; if (a.getAttribute('href') === "#" + id) { return links[i]; }	} } function changeTabs{ // get the hash var hash = location.hash;

if (hash === "") { // fresh page, highlight the first item. tab = document.getElementsByClassName('cathedral-tab')[0]; if (tab) { tab.classList.add("selected"); hash = tab.firstChild.getAttribute('href'); }	}

if (!hash) { return; }

// get the ID of the item to be opened var id = hash.substring(1); var target = document.getElementById(id);

// toggle the target if (target) { if (target.style.display === "none") { hideAllTabDetails; target.style.display = "block"; // open all of its parents while (target.parentElement){ if(target.parentElement.classList.contains('cathedral-details')){ target.parentNode.style.display = "block"; getTab(target.parentNode.id).classList.add("selected"); }				target = target.parentElement; }			// color its corresponding tab if (typeof tab === "undefined" || tab instanceof Event) { // We jumped here from another page. Find the corresponding link and highlight it. getTab(id).classList.add("selected"); } else { tab.classList.add("selected"); }		}	} } window.addEventListener('hashchange', changeTabs); hideAllTabDetails; changeTabs;