https://subaru.co.uk/js/tabs/tabs.js

1
2// Changed the content on the vehicle tabs
3  function changeActiveTab(event,tabID){
4    let element = event.target;
5    while(element.nodeName !== "A"){
6      element = element.parentNode;
7    }
8    ulElement = element.parentNode.parentNode;
9    aElements = ulElement.querySelectorAll("li > a");
10    tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
11    for(let i = 0 ; i < aElements.length; i++){
12      aElements[i].classList.remove("lg:border-b-neutral-700");
13      aElements[i].classList.add("lg:border-b-neutral-500");
14      aElements[i].classList.add("bg-neutral-800");
15      aElements[i].classList.remove("bg-neutral-700");
16      tabContents[i].classList.add("hidden");
17      tabContents[i].classList.remove("block");
18    }
19    element.classList.add("lg:border-b-neutral-700");
20    element.classList.remove("lg:border-b-neutral-500");
21
22    element.classList.remove("bg-neutral-800");
23    element.classList.remove("bg-white");
24    element.classList.add("bg-neutral-700");
25    document.getElementById(tabID).classList.remove("hidden");
26    document.getElementById(tabID).classList.add("block");
27  }
28
29// Changed the content on the vehicle tabs
30  function changeActiveTabLight(event,tabID){
31    let element = event.target;
32    while(element.nodeName !== "A"){
33      element = element.parentNode;
34    }
35    ulElement = element.parentNode.parentNode;
36    aElements = ulElement.querySelectorAll("li > a");
37    tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
38    for(let i = 0 ; i < aElements.length; i++){
39      // aElements[i].classList.remove("lg:border-b-neutral-700");
40      aElements[i].classList.remove("lg:border-white");
41      aElements[i].classList.add("bg-neutral-200");
42      aElements[i].classList.remove("bg-white");
43      tabContents[i].classList.add("hidden");
44      tabContents[i].classList.remove("block");
45    }
46
47    element.classList.add("bg-white");
48    element.classList.add("lg:border-white");
49    element.classList.remove("bg-neutral-200");
50    element.classList.remove("lg:border-b-neutral-200");
51    document.getElementById(tabID).classList.remove("hidden");
52    document.getElementById(tabID).classList.add("block");
53  }
54
55// Changed the content on the vehicle tabs
56  function changeActiveTabPrimary(event,tabID){
57    let element = event.target;
58    while(element.nodeName !== "A"){
59      element = element.parentNode;
60    }
61    ulElement = element.parentNode.parentNode;
62    aElements = ulElement.querySelectorAll("li > a");
63    tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
64    tabPriceContents = document.getElementById("tabs-id").querySelectorAll(".price-tab-content > div");
65
66    for(let i = 0 ; i < aElements.length; i++){
67      // aElements[i].classList.remove("lg:border-b-neutral-700");
68      aElements[i].classList.remove("lg:border-white");
69      aElements[i].classList.add("bg-neutral-200");
70      aElements[i].classList.remove("bg-primary");
71      tabContents[i].classList.add("hidden");
72      tabContents[i].classList.remove("block");
73      if (tabPriceContents[i].classList.contains("opacity-50")) {
74        tabPriceContents[i].classList.remove("opacity-50");
75        tabPriceContents[i].classList.add("opacity-100");
76      }
77      else if (tabPriceContents[i].classList.contains("opacity-100")) {
78        tabPriceContents[i].classList.remove("opacity-100");
79        tabPriceContents[i].classList.add("opacity-50");
80      }
81    }
82    element.classList.add("bg-primary");
83    element.classList.add("lg:border-white");
84    element.classList.remove("bg-neutral-200");
85    element.classList.remove("lg:border-b-neutral-200");
86    document.getElementById(tabID).classList.remove("hidden");
87    document.getElementById(tabID).classList.add("block");
88  }
89
90
91// Changed the content on the vehicle tabs
92  function changeActiveTabOffers(event,tabID){
93    let element = event.target;
94    while(element.nodeName !== "A"){
95      element = element.parentNode;
96    }
97    ulElement = element.parentNode.parentNode;
98    aElements = ulElement.querySelectorAll("li > a");
99    tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
100    for(let i = 0 ; i < aElements.length; i++){
101        aElements[i].classList.add("bg-primary-600/25");
102      aElements[i].classList.remove("bg-primary-500");
103      tabContents[i].classList.add("hidden");
104      tabContents[i].classList.remove("block");
105    }
106
107    element.classList.remove("bg-primary-600/25");
108    element.classList.remove("bg-white");
109    element.classList.add("bg-primary-500");
110    document.getElementById(tabID).classList.remove("hidden");
111    document.getElementById(tabID).classList.add("block");
112  }