https://nsuok.edu/_resources/js/heydon.js

1(function() {
2    // Get relevant elements and collections
3    const tabbed_set = document.getElementsByClassName('tabbed');
4	var num_els = tabbed_set.length;
5	//console.log("num_els", num_els);
6	
7	for (var i = 0; i < num_els; i++){
8		tabbed = tabbed_set[i];
9		//console.log("tabbed", tabbed);
10		const tablist = tabbed.querySelector('ul');
11		const tabs = tablist.querySelectorAll('a');
12		const panels = tabbed.querySelectorAll('[id^="section"]');
13
14		// The tab switching function
15		const switchTab = (oldTab, newTab) => {
16		newTab.focus();
17		// Make the active tab focusable by the user (Tab key)
18		newTab.removeAttribute('tabindex');
19		// Set the selected state
20		newTab.setAttribute('aria-selected', 'true');
21		oldTab.removeAttribute('aria-selected');
22		oldTab.setAttribute('tabindex', '-1');
23		// Get the indices of the new and old tabs to find the correct
24		// tab panels to show and hide
25		let index = Array.prototype.indexOf.call(tabs, newTab);
26		let oldIndex = Array.prototype.indexOf.call(tabs, oldTab);
27		panels[oldIndex].hidden = true;
28		panels[index].hidden = false;
29		}
30
31		// Add the tablist role to the first ul in the .tabbed container
32		tablist.setAttribute('role', 'tablist');
33
34		// Add semantics are remove user focusability for each tab
35		Array.prototype.forEach.call(tabs, (tab, i) => {
36		tab.setAttribute('role', 'tab');
37		tab.setAttribute('id', 'tab' + (i + 1));
38		tab.setAttribute('tabindex', '-1');
39		tab.parentNode.setAttribute('role', 'presentation');
40
41		// Handle clicking of tabs for mouse users
42		tab.addEventListener('click', e => {
43		e.preventDefault();
44		let currentTab = tablist.querySelector('[aria-selected]');
45		if (e.currentTarget !== currentTab) {
46		switchTab(currentTab, e.currentTarget);
47		}
48		});
49
50		// Handle keydown events for keyboard users
51		tab.addEventListener('keydown', e => {
52		// Get the index of the current tab in the tabs node list
53		let index = Array.prototype.indexOf.call(tabs, e.currentTarget);
54		// Work out which key the user is pressing and
55		// Calculate the new tab's index where appropriate
56		let dir = e.which === 37 ? index - 1 : e.which === 39 ? index + 1 : e.which === 40 ? 'down' : null;
57		if (dir !== null) {
58		e.preventDefault();
59		// If the down key is pressed, move focus to the open panel,
60		// otherwise switch to the adjacent tab
61		dir === 'down' ? panels[i].focus() : tabs[dir] ? switchTab(e.currentTarget, tabs[dir]) : void 0;
62		}
63		});
64		});
65
66		// Add tab panel semantics and hide them all
67		Array.prototype.forEach.call(panels, (panel, i) => {
68		panel.setAttribute('role', 'tabpanel');
69		panel.setAttribute('tabindex', '-1');
70		let id = panel.getAttribute('id');
71		panel.setAttribute('aria-labelledby', tabs[i].id);
72		panel.hidden = true; 
73		});
74
75		// Initially activate the first tab and reveal the first tab panel
76		tabs[0].removeAttribute('tabindex');
77		tabs[0].setAttribute('aria-selected', 'true');
78		panels[0].hidden = false;
79		
80	}
81	
82  })();