tabbedContainer.js (1895B)
1 class TabContainer { 2 3 constructor(id) { 4 this.container = id; 5 this.tabContents = Array.from( 6 this.container.getElementsByClassName("tabContent") 7 ); 8 9 this.makeTabs(); 10 } 11 12 makeTabs(){ 13 14 this.bar = document.createElement("div"); 15 this.bar.classList.add("tabBar") 16 17 this.body = document.createElement("div"); 18 this.body.classList.add("tabs"); 19 20 for (var tab of this.tabContents) { 21 this.bar.appendChild(this.makeTabButton(tab)); 22 this.body.appendChild(tab); 23 } 24 25 this.container.replaceChildren( 26 this.bar, 27 this.body, 28 ) 29 } 30 31 makeTabButton(tab){ 32 33 const button = document.createElement("button"); 34 35 button.tabName = tab.id; 36 button.innerText = tab.id; 37 button.classList.add("tabLink"); 38 button.addEventListener("click", TabContainer.clickTab); 39 40 if (tab.classList.contains("active")) { 41 button.classList.add("active"); 42 } 43 44 return button; 45 } 46 47 static clickTab (evt) { 48 49 // when used as event handler THIS is bound to element that is clicked. 50 51 const tabName = this.tabName; 52 const tabBar = this.parentElement; 53 const container = tabBar.parentElement; 54 const tabContent = container.getElementsByClassName("tabContent"); 55 const tabLink = container.getElementsByClassName("tabLink"); 56 57 for (let element of tabContent){ 58 element.classList.remove("active"); 59 } 60 61 for (let element of tabLink){ 62 element.classList.remove("active"); 63 } 64 65 tabContent.namedItem(tabName).classList.add("active"); 66 this.classList.add("active"); 67 } 68 } 69 70 // Initialize containers on site. 71 Array.from(document.getElementsByClassName('tabContainer')).forEach( 72 x => new TabContainer(x) 73 ) 74