https://www.odaje.com/cdn/shop/t/886/assets/vite-tabs-D1KcXWtZ.min.js

1class NavTabs extends HTMLElement {
2  constructor() {
3    super();
4    this.setActiveTab = this.setActiveTab.bind(this);
5  }
6  connectedCallback() {
7    this.Tabs = {};
8    this.tabsContainerEl = this;
9    this.tabsNavEls = this.tabsContainerEl.querySelectorAll(".js-tab-nav");
10    this.tabsContentEls = this.tabsContainerEl.querySelectorAll(".js-tab-content");
11    this.toggleClassOnly = this.tabsContainerEl.hasAttribute("toggle-class-only") || false;
12    this.tabsNavEls.forEach((tabEl) => {
13      tabEl.addEventListener("click", this.setActiveTab);
14    });
15  }
16  setActiveTab(event) {
17    this.tabsNavEls.forEach((tabEl) => {
18      if (tabEl.classList.contains("active")) {
19        tabEl.classList.remove("active");
20      }
21    });
22    this.tabsContentEls.forEach((tabEl) => {
23      if (!this.toggleClassOnly) {
24        tabEl.style.display = "none";
25      }
26      if (tabEl.classList.contains("active")) {
27        tabEl.classList.remove("active");
28      }
29    });
30    let activeTabNav = event.currentTarget;
31    let targetTabName = activeTabNav.getAttribute("data-target");
32    let activeTabContent = this.tabsContainerEl.querySelector(targetTabName);
33    if (activeTabNav) {
34      activeTabNav.classList.add("active");
35    }
36    if (activeTabContent) {
37      activeTabContent.classList.add("active");
38    }
39    if (activeTabContent && !this.toggleClassOnly) {
40      activeTabContent.style.display = "block";
41    }
42  }
43}
44customElements.define("w3-tabs", NavTabs);