https://darkslategray-lemur-568121.hostingersite.com/wp-content/themes/hello-theme-child-master/js/custom.js

1/* -------------------- tabbed content info
2
3-- only fires if tabsWrapper is found in page/view.
4-- clears any accidental .active classes from the code block
5-- starts with tab of choice (initialTab).
6-- checks for correct number of tabs and content blocks
7---- gives user feedback/code suggestion if tabs/content blocks don't match.
8-- allows for unlimited tabs and/or content blocks (as desired)
9
10*/
11
12function contentTabs() {
13	// set initial tab of choice
14	const initialTab = 0;
15
16	// -------------------------------------------------
17
18	// declare vars
19	let i;
20	// check if container/wrapper exist
21	const containerActive = document.getElementsByClassName('tabs-wrapper');
22	// put all tab-items into a variable
23	const tabButton = document.querySelectorAll('#slidertabitem');
24	// put all item-contents into a variable
25	const tabContent = document.querySelectorAll('.slideritem-content');
26
27	if (containerActive.length >= 1) {
28		runTabs();
29	}
30
31	function runTabs() {
32		/* maintenance mode, check amount of tab-items is same as item-content.
33-- if isn't, suggest "warn" ways to ommit error messages. */
34		function initChecks() {
35			// clear all active classes
36			clearActive();
37			// check element numbers are correct
38			if (tabButton.length < tabContent.length) {
39				// if there are less buttons than content tabs
40				console.warn(
41					'You need to have the same amount of tab-item\'s as you have content-tab\'s'
42				);
43				console.group(
44					'Paste this emmet shorthand inside the \'tabs-wrapper\' div and press enter/tab'
45				);
46				console.log('div#slidertabitem{tab-title}');
47				console.groupEnd();
48			} else if (tabContent.length < tabButton.length) {
49				// if there are less content tabs than buttons
50				console.warn(
51					'You need to have the same amount of content-tab\'s as you have tab-items\'s'
52				);
53				console.group(
54					'Paste this emmet shorthand inside the \'tabbed-content\' div and press enter/tab'
55				);
56				console.log(
57					'div.slideritem-content>div.hightlights*4>h4{some title}+p{some copy}'
58				);
59				console.groupEnd();
60			} else {
61				tabContent[initialTab].classList.add('active');
62                tabButton[initialTab].classList.add('active');
63			}
64		}
65		initChecks();
66
67		/* self calling function to clear all active classed from group of tabs
68    -- if user has added active class for some wierd reason */
69		function clearActive() {
70			// cycle through all elements with class="tab-item" and remove "active".
71			for (i = 0; i < tabContent.length; i++) {
72				tabContent[i].classList.remove('active');
73                tabButton[i].classList.remove('active');
74			}
75		}
76
77		// add event listeners to all elements with tab-item class and wait for click
78		for (let tabIndex = 0; tabIndex < tabButton.length; tabIndex++) {
79			tabButton[tabIndex].addEventListener('click', function() {
80				// clear all active class's from the group of tabs.
81				clearActive();
82				// select item-content with the same index as the clicked tab-item and add an active class.
83				tabContent[tabIndex].classList.toggle('active');
84                tabButton[tabIndex].classList.toggle('active');
85			});
86		}
87	}
88}
89contentTabs();
90