diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index cea387c4619cba6369ce89853c26e726811d31ca..75c789f7c9a3743f9dc24bc8b5a3930b49a95d47 100644
--- a/src/components/Buttons.tsx
+++ b/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');
+ }
+}
+}
diff --git a/src/components/goto.tsx b/src/components/goto.tsx
index 76a2a45eeed56cc39fb0a842f2323c8c88e15225..b7ea687c8a86e2da17781a81ba8c0ba6a0d48616 100644
--- a/src/components/goto.tsx
+++ b/src/components/goto.tsx
@@ -1,3 +1,5 @@
+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
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 86d08b7c0e1bacf977375c83426d4b0b9fa752b0..d91d6d11f45b2db7b3411441bab8dcc27269120f 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,4 +1,4 @@
-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";
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index b2ae9107324a1e14b0913cc6af433ed7b1616479..e3278bc356e8e8782ffb34a117dfc0e085fbbd85 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,14 +1,10 @@
-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
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 5cfea0a2545d42b9435a31f75f5090f938ed5617..d557833f41b7893d6df3cc336beaec1d5182f80d 100644
--- a/src/contents/human-practices.tsx
+++ b/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">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index 0cfa33eb77f873b4ebe40da7d4039596c4fb2f84..104d7d432fa2ef1bd569a9769bbb2ca57a05a7f0 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,27 +1,38 @@
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>