From b9f9a5a03aa18ce1a5f7f90b9ca6bed607f95152 Mon Sep 17 00:00:00 2001
From: Alfie Jones <alfie.jones@hotmail.co.uk>
Date: Mon, 10 Jun 2024 16:25:07 +0100
Subject: [PATCH] Update tabs.astro

---
 .../src/components/schema/tabs.astro          | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/apps/marketing-astro/src/components/schema/tabs.astro b/apps/marketing-astro/src/components/schema/tabs.astro
index 7e558e45..8ab5f152 100644
--- a/apps/marketing-astro/src/components/schema/tabs.astro
+++ b/apps/marketing-astro/src/components/schema/tabs.astro
@@ -40,35 +40,41 @@ const { labels, idSuffix, ...props } = Astro.props;
 </div>
 
 <script>
-  const tabs = document.querySelectorAll("[data-tabs]");
+  function initTabs() {
+    const tabs = document.querySelectorAll("[data-tabs]");
 
-  tabs.forEach((tab) => {
-    const triggers = tab.querySelectorAll("button[role=tab]");
+    tabs.forEach((tab) => {
+      const triggers = tab.querySelectorAll("button[role=tab]");
 
-    let activeTrigger = triggers[0];
-    let activePanel: Element = document.getElementById(
-      activeTrigger.getAttribute("aria-controls")!
-    )!;
+      let activeTrigger = triggers[0];
+      let activePanel: Element = document.getElementById(
+        activeTrigger.getAttribute("aria-controls")!
+      )!;
 
-    triggers.forEach((trigger) => {
-      trigger.addEventListener("click", () => {
-        activeTrigger.setAttribute("aria-selected", "false");
-        activeTrigger.setAttribute("tabindex", "-1");
+      triggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+          activeTrigger.setAttribute("aria-selected", "false");
+          activeTrigger.setAttribute("tabindex", "-1");
 
-        trigger.setAttribute("aria-selected", "true");
-        trigger.setAttribute("tabindex", "0");
+          trigger.setAttribute("aria-selected", "true");
+          trigger.setAttribute("tabindex", "0");
 
-        const tabId = trigger.getAttribute("aria-controls")!;
+          const tabId = trigger.getAttribute("aria-controls")!;
 
-        if (activePanel) {
-          activePanel.setAttribute("hidden", "");
-        }
+          if (activePanel) {
+            activePanel.setAttribute("hidden", "");
+          }
 
-        activePanel = document.getElementById(tabId)!;
-        activePanel.removeAttribute("hidden");
+          activePanel = document.getElementById(tabId)!;
+          activePanel.removeAttribute("hidden");
 
-        activeTrigger = trigger;
+          activeTrigger = trigger;
+        });
       });
     });
-  });
+  }
+
+  initTabs();
+
+  document.addEventListener("astro:after-swap", initTabs);
 </script>