scroll and open tabs etc

src/components/Buttons.tsx

@@ -185,7 +185,7 @@ export function ButtonTwo(){
 export function ButtonOne({text, open}: {text:string, open:string}){
   return(
     <div className="boxy-1">
-      <span typeof="button" onClick={openIt({it: open})}>
+      <span typeof="button" onClick={openFromOtherPage(open)}>
       <div className="btn-new btn-one">
       {text}
       </div></span>
@@ -254,4 +254,41 @@ export function openItTwo({it}: {it: string}){
     event.currentTarget.className += " active";
   }
   return openit; 
-}
\ No newline at end of file
+}
+
+
+
+
+export function openFromOtherPage(it: string) {
+  return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
+    // Get all elements with class "cycletab" and hide them
+    let tabcontent = document.getElementsByClassName("cycletab");
+    for (let i = 0; i < tabcontent.length; i++) {
+        (tabcontent[i] as HTMLElement).style.display = "none";
+    }
+    
+    // Show the specific tab content based on the "it" parameter
+    const tabToOpen = document.getElementById(it);
+    if (tabToOpen) {
+        tabToOpen.style.display = "block";
+
+        // Scroll the tab content into view
+        const elementTop = tabToOpen.getBoundingClientRect().top + window.pageYOffset;
+        const offset = window.innerHeight / 2 - tabToOpen.offsetHeight / 2;
+        const scrollPosition = elementTop - offset;
+
+        window.scrollTo({
+            top: scrollPosition,
+            behavior: 'smooth',
+        });
+    }
+
+    // Optionally, add an "active" class to the clicked button (if needed)
+    const tabs = document.querySelectorAll('.btn-new');
+    tabs.forEach(tab => tab.classList.remove('active'));
+
+    if (event.currentTarget) {
+        event.currentTarget.classList.add('active');
+    }
+}
+}

src/components/goto.tsx

+import { useNavigate } from "react-router-dom";
+
 export const goTo = (el: HTMLElement): void => {
     const elementTop = el.getBoundingClientRect().top;
     const elementPosition = elementTop + window.pageYOffset;
@@ -47,4 +49,11 @@ export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
         </a>
         </sup> 
     );
+};
+const navigate = useNavigate();
+export const goToTextsAndOpenCollapsible = (collapseId: string) => {
+    navigate(collapseId);
+};
+export const goToPagesAndOpenTab = (tabId: string) => {
+navigate(tabId);
 };
\ No newline at end of file

src/contents/description.tsx

-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { InfoBox } from "../components/Boxes";
 import { TabButtonRow } from "../components/Buttons";
 import Collapsible from "../components/Collapsible";

src/contents/education.tsx

 
-import { useNavigate } from "react-router-dom";
 import { ButtonOne} from "../components/Buttons";
+import { goToPagesAndOpenTab, goToTextsAndOpenCollapsible } from "../components/goto";
 
 
 export function Education() {
 
-const navigate = useNavigate();
-const goToTextsAndOpenCollapsible = (collapseId: string) => {
-        navigate(collapseId);
-    };
     return (
       <>
         <div>
@@ -72,7 +68,7 @@ const goToTextsAndOpenCollapsible = (collapseId: string) => {
             <h3>Why and in which ways were we invested in MUKOmove? </h3>
           <p>We did not stop at our participation itself – we wanted to make other people from our university and city 
             aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team. 
-            Our survey about cystic fibrosis awareness and our discussions with <a href=" /bielefeld-cebitec/interviews#westhoff">Kathrin Westhoff</a>, the head of a 
+            Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('/human-practices?tab=InvWesthoff')}>Kathrin Westhoff</a>, the head of a 
             practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known 
             this illness still is. Especially the interview with the physiotherapist made us realize how important 
             exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in 

src/contents/human-practices.tsx

@@ -50,7 +50,7 @@
             */
 import { TimeHori } from "../components/HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import {  ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
+import {  ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
 import { BlockQuoteB } from "../components/Quotes";
 import { Box, Tab } from "@mui/material";
 import {TabContext, TabList, TabPanel} from '@mui/lab';
@@ -735,6 +735,14 @@ export function HumanPractices() {
           }
       }
   }, [location.search]);
+  useEffect(() => {
+      const params = new URLSearchParams(location.search);
+      const tabId = params.get('tab');
+
+      if (tabId) {
+          openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+      }
+  }, [location.search]);
   return (  
     <div className="row mt-4">
       

src/contents/partners.tsx

 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
 
 export function Partners() {
-  const location = useLocation();
-  useEffect(() => {
-      // Scroll to the section specified by the collapseId in the URL
-      const params = new URLSearchParams(location.search);
-      const collapseId = params.get('collapseId');
-
-      if (collapseId) {
-          const element = document.getElementById(collapseId);
-          if (element) {
-              const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
-              const offset = window.innerHeight / 2 - element.offsetHeight / 2;
-              const scrollPosition = elementTop - offset;
+  
 
-              window.scrollTo({
-                  top: scrollPosition,
-                  behavior: 'smooth',
-              });
-          }
-      }
-  }, [location.search]);
+  const location = useLocation();
+    useEffect(() => {
+        // Scroll to the section specified by the collapseId in the URL
+        const params = new URLSearchParams(location.search);
+        const collapseId = params.get('collapseId');
+  
+        if (collapseId) {
+            const element = document.getElementById(collapseId);
+            if (element) {
+                const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+                const offset = window.innerHeight / 2 - element.offsetHeight / 2;
+                const scrollPosition = elementTop - offset;
+  
+                window.scrollTo({
+                    top: scrollPosition,
+                    behavior: 'smooth',
+                });
+            }
+        }
+    }, [location.search]);
+      useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const tabId = params.get('tab');
+  
+        if (tabId) {
+            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+        }
+    }, [location.search]);
     return (
       <>
       <div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>