Refactor code structure and remove redundant changes

prod/assets/js/tabs.js

@@ -0,0 +1,97 @@
+// handle current tablink style
+const handleCurrentTabLinkStyle = (tabLinks, currentIndex) => {
+  tabLinks.forEach((tabLink, idx) => {
+    const currentTabLink = tabLinks[currentIndex];
+    const tabLinkClasses = tabLink.classList;
+    const currentTabLinkClasses = currentTabLink.classList;
+    const spanClasses = tabLink.querySelector("span")?.classList;
+
+    const currentSpanClasses = currentTabLink.querySelector("span")?.classList;
+
+    if (spanClasses) {
+      // button default style
+      tabLinkClasses.remove("bg-white", "shadow-bottom", "active");
+      tabLinkClasses.add(
+        "bg-lightGrey7",
+        "dark:bg-lightGrey7-dark",
+        "inActive"
+      );
+      spanClasses.replace("w-full", "w-0");
+      tabLink.disabled = false;
+      // current button style
+      if (currentIndex === idx) {
+        currentTabLink.disabled = true;
+        currentTabLinkClasses.remove(
+          "bg-lightGrey7",
+          "dark:bg-lightGrey7-dark",
+          "inActive"
+        );
+        currentTabLinkClasses.add(
+          "bg-white",
+          "dark:bg-whiteColor-dark",
+          "shadow-bottom",
+          "active"
+        );
+        currentSpanClasses.replace("w-0", "w-full");
+      }
+    } else {
+      tabLinkClasses.remove("before:w-full", "active");
+      if (currentIndex === idx) {
+        tabLinkClasses.add("before:w-full", "active");
+      }
+    }
+  });
+};
+
+// handle tab content
+const handleTabContents = (tab, currentIndex) => {
+  const nodeListOftabContents = tab.querySelector(".tab-contents").children;
+  const tabContents = [...nodeListOftabContents];
+  const currentTabContentClasses = tabContents[currentIndex].classList;
+  tabContents.forEach((tabContent, idx) => {
+    const tabContentClasses = tabContent.classList;
+
+    // tab contents default style
+    tabContentClasses.remove("block");
+    tabContentClasses.add("hidden");
+
+    if (currentIndex === idx) {
+      currentTabContentClasses.add("block", "opacity-0");
+      currentTabContentClasses.remove("hidden", "opacity-100");
+
+      // add accordion style
+      const accordion = tab.querySelector(".accordion.active");
+      if (accordion) {
+        const contents = accordion.querySelector(".accordion-content");
+        const contentHeight = contents.children[idx]?.offsetHeight;
+        if (contentHeight) {
+          contents.style.height = `${contentHeight}px`;
+        }
+      }
+      setTimeout(() => {
+        currentTabContentClasses.remove("opacity-0");
+        currentTabContentClasses.add("opacity-100");
+      }, 150);
+    }
+  });
+};
+
+// get tab links and listen link events
+const handleTabLinks = (tab) => {
+  const nodeListOfTabLinks = tab.querySelector(".tab-links").children;
+  const tabLinks = [...nodeListOfTabLinks];
+
+  tabLinks.forEach((tabLink, idx) => {
+    tabLink.addEventListener("click", () => {
+      handleCurrentTabLinkStyle(tabLinks, idx);
+      handleTabContents(tab, idx);
+    });
+  });
+};
+
+// main tab controller
+const tabsController = () => {
+  const nodeListOfTabs = document.querySelectorAll(".tab");
+  const tabs = [...nodeListOfTabs];
+  tabs.forEach((tab) => handleTabLinks(tab));
+};