Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* 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();