useEffect tab fix

src/contents/education.tsx

@@ -2,37 +2,46 @@
 import { ButtonOne} from "../components/Buttons";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../components/Buttons";
 import { useNavigation } from "../utils/useNavigation";
 
 export function Education() {
   const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
   const location = useLocation();
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const collapseId = params.get('collapseId');
-        const tabId = params.get('tab');
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const collapseId = params.get('collapseId');
+    const tabId = params.get('tab');
 
-        // Scroll to the section specified by collapseId
-        if (collapseId) {
-            const collapseElement = document.getElementById(collapseId);
-            if (collapseElement) {
-                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-                const scrollPosition = elementTop - offset;
+    // Open the tab specified by tabId
+    if (tabId) {
+        // Hide all tabs
+        const tabs = document.querySelectorAll('.cycletab');
+        tabs.forEach((tab) => {
+            (tab as HTMLElement).style.display = 'none';
+        });
 
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'smooth',
-                });
-            }
+        // Show the selected tab
+        const selectedTab = document.getElementById(tabId);
+        if (selectedTab) {
+            selectedTab.style.display = 'block';
         }
+    }
 
-        // Open the tab specified by tabId
-        if (tabId) {
-            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    // Scroll to the section specified by collapseId after opening the tab
+    if (collapseId) {
+        const collapseElement = document.getElementById(collapseId);
+        if (collapseElement) {
+            const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
+            const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
+            const scrollPosition = elementTop - offset;
+
+            window.scrollTo({
+                top: scrollPosition,
+                behavior: 'smooth',
+            });
         }
-    }, [location.search]);
+    }
+}, [location.search]);
 
     return (
       <>

src/contents/engineering.tsx

@@ -8,31 +8,41 @@ import { openFromOtherPage } from "../components/Buttons";
 export function Engineering() {
    const location = useLocation();
 
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const collapseId = params.get('collapseId');
-        const tabId = params.get('tab');
+   useEffect(() => {
+      const params = new URLSearchParams(location.search);
+      const collapseId = params.get('collapseId');
+      const tabId = params.get('tab');
 
-        // Scroll to the section specified by collapseId
-        if (collapseId) {
-            const collapseElement = document.getElementById(collapseId);
-            if (collapseElement) {
-                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-                const scrollPosition = elementTop - offset;
+      // Open the tab specified by tabId
+      if (tabId) {
+          // Hide all tabs
+          const tabs = document.querySelectorAll('.enginneeringtab');
+          tabs.forEach((tab) => {
+              (tab as HTMLElement).style.display = 'none';
+          });
 
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'smooth',
-                });
-            }
-        }
+          // Show the selected tab
+          const selectedTab = document.getElementById(tabId);
+          if (selectedTab) {
+              selectedTab.style.display = 'block';
+          }
+      }
 
-        // Open the tab specified by tabId
-        if (tabId) {
-            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
-        }
-    }, [location.search]);
+      // Scroll to the section specified by collapseId after opening the tab
+      if (collapseId) {
+          const collapseElement = document.getElementById(collapseId);
+          if (collapseElement) {
+              const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
+              const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
+              const scrollPosition = elementTop - offset;
+
+              window.scrollTo({
+                  top: scrollPosition,
+                  behavior: 'smooth',
+              });
+          }
+      }
+  }, [location.search]);
 
     return (
       <>