merged openCity into openElement

src/components/Buttons.tsx

 import { Link } from "react-router-dom";
-import { openCity } from "./HorizontalTimeline";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { openThem } from "../utils/openThem";
+import { openElement } from "../utils/openElement";
 interface UrlButtonProps{
     href: string,
     children: string,
@@ -139,34 +140,13 @@ function expandIt({it}: {it: string}){
   return openit; 
 }
 
-export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
-  const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
-    var i, tabcontent, tablinks, wegcontent;
-  tabcontent = document.getElementsByClassName(cla);
-  for (i = 0; i < tabcontent.length; i++) {
-    (tabcontent[i] as HTMLElement).style.display = "none";
-  }
-  tablinks = document.getElementsByClassName("tabbutton");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-  if (weg){
-    wegcontent  = document.getElementsByClassName(weg);
-    for (i = 0; i < wegcontent.length; i++) {
-      (wegcontent[i] as HTMLElement).style.display = "none";
-    }
-  }
-  document.getElementById(cityName)!.style.display = "block";
-  event.currentTarget.className += " active";
-  }
-  return opencity; 
-}
+
 
 export function ButtonThree(){
   return(
     <div className="boxy-3">
       <div className="btn-new btn-three">
-        <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
+        <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
       </div>
     </div>
   )
@@ -176,7 +156,7 @@ export function ButtonTwo(){
   return(
     <div className="boxy-2">
       <div className="btn-new btn-two">
-        <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
+        <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
       </div>
     </div>
   )
@@ -234,21 +214,48 @@ export function ButtonFourRotate(){
 
 
 
-export function openIt({whattoopen, classnamewhattoopen}: {whattoopen: string, classnamewhattoopen: string }){
+export function openIt({whattoopen, classnamewhattoopen, whattoclose}: {whattoopen: string, classnamewhattoopen: string, whattoclose?: string }){
   const openit =  (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-   /*  console.log(document.getElementById(it)) */
+    var i, tabcontent, wegcontent;
     console.log(document.getElementById(whattoopen)?.className)
-    let tabcontent = document.getElementsByClassName(classnamewhattoopen);
-    for (let i = 0; i < tabcontent.length; i++) {
+    tabcontent = document.getElementsByClassName(classnamewhattoopen);
+    for (i = 0; i < tabcontent.length; i++) {
        (tabcontent[i] as HTMLElement).style.display = "none";
      }
     /* console.log(document.getElementById(it)!.style.display) */
       document.getElementById(whattoopen)!.style.display = "block";
-    
+      if (whattoclose){
+        wegcontent  = document.getElementsByClassName(whattoclose);
+        for (i = 0; i < wegcontent.length; i++) {
+          (wegcontent[i] as HTMLElement).style.display = "none";
+        }
+      }
     event.currentTarget.className += " active";
   }
   return openit; 
 }
+export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
+  const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+    var i, tabcontent, tablinks, wegcontent;
+  tabcontent = document.getElementsByClassName(cla);
+  for (i = 0; i < tabcontent.length; i++) {
+    (tabcontent[i] as HTMLElement).style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tabbutton");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  if (weg){
+    wegcontent  = document.getElementsByClassName(weg);
+    for (i = 0; i < wegcontent.length; i++) {
+      (wegcontent[i] as HTMLElement).style.display = "none";
+    }
+  }
+  document.getElementById(cityName)!.style.display = "block";
+  event.currentTarget.className += " active";
+  }
+  return opencity; 
+}
 
 /* function openItTwo({it}: {it: string}){
   const openit =  (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -272,36 +279,3 @@ export function openIt({whattoopen, classnamewhattoopen}: {whattoopen: string, c
 
 
     
-
-function openThem({it}: {it: string}){
-  const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
-    console.log("it classname: " + document.getElementById(it)?.className)
-    console.log("it: " + it)
-    let contenttabid = "tab-" + it; 
-    let parent = "parent-" + it; 
-    console.log("we want to open " + it + " and " + contenttabid)
-    let sideitems = document.getElementsByClassName("sideitem"); 
-    let subtabs = document.getElementsByClassName("sidesubtab");
-    let contenttabs = document.getElementsByClassName("enginneeringtab");
-    for (let i = 0; i < subtabs.length; i++) {
-       (subtabs[i] as HTMLElement).style.display = "none";
-       console.log("Hiding sidebar subtab...")
-     }
-     for (let i = 0; i < contenttabs.length; i++) {
-      (contenttabs[i] as HTMLElement).style.display = "none";
-      console.log("Hiding content tab...")
-    }
-    for (let i = 0; i < sideitems.length; i++) {
-      (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-      console.log("Hiding sidebar subtab...")
-    }
-    
-      document.getElementById(it)!.style.display = "block";
-      document.getElementById(parent)!.classList.add("active-sideitem");
-      document.getElementById(contenttabid)!.style.display = "block";
-    
-      
-  }
-  return gotoandopen; 
-}
\ No newline at end of file

src/components/HorizontalTimeline.tsx

@@ -138,10 +138,10 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     )
     }
   
-  
+/*   
      export function openCity({cityName}:{cityName: string}) {
         const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
-          var i, tabcontent, tablinks;
+        var i, tabcontent, tablinks;
         tabcontent = document.getElementsByClassName("tabcontent");
         for (i = 0; i < tabcontent.length; i++) {
           (tabcontent[i] as HTMLElement).style.display = "none";
@@ -154,7 +154,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
         event.currentTarget.className += " active";
         }
         return opencity; 
-      }
+      } */
       
       interface ItemProps {
         title: string ,

src/contents/human-practices.tsx

@@ -50,7 +50,8 @@
             */
 import { TimeHori } from "../components/HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import {  ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
+import {  ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
 import { BlockQuoteB } from "../components/Quotes";
 import { Box, Tab } from "@mui/material";
 import {TabContext, TabList, TabPanel} from '@mui/lab';

src/sidebars/descS.tsx

@@ -117,30 +117,3 @@ export function DescSidebar(){
 
 
 
-export function openThem({it}: {it: string}){
-    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-     /*    
-      console.log("it classname: " + document.getElementById(it)?.className)
-      console.log("it: " + it) */
-      let contenttabid = "tab-" + it; 
-      let parent = "parent-" + it; 
-     /*  console.log("we want to open " + it + " and " + contenttabid) */
-      let sideitems = document.getElementsByClassName("sideitem"); 
-      let subtabs = document.getElementsByClassName("sidesubtab");
-      for (let i = 0; i < subtabs.length; i++) {
-         (subtabs[i] as HTMLElement).style.display = "none";
-    /*      console.log("Hiding sidebar subtab...") */
-       }
-      for (let i = 0; i < sideitems.length; i++) {
-        (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-      /*   console.log("Hiding sidebar subtab...") */
-      }
-      
-        document.getElementById(it)!.style.display = "block";
-        document.getElementById(parent)!.classList.add("active-sideitem");
-        document.getElementById(contenttabid)!.style.display = "block";
-      
-        
-    }
-    return gotoandopen; 
-  }
\ No newline at end of file

src/sidebars/engS.tsx

 import { useEffect } from "react";
 import { Highlight } from "../components/Highlight";
-
+import { openThem } from "../utils/openThem";
 export function EngSide(){
     let nums = [ "del1"]
     useEffect(() => {
@@ -184,35 +184,3 @@ export function EngSide(){
  */
 
 
-function openThem({it}: {it: string}){
-    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
-      console.log("it classname: " + document.getElementById(it)?.className)
-      console.log("it: " + it)
-      let contenttabid = "tab-" + it; 
-      let parent = "parent-" + it; 
-      console.log("we want to open " + it + " and " + contenttabid)
-      let sideitems = document.getElementsByClassName("sideitem"); 
-      let subtabs = document.getElementsByClassName("sidesubtab");
-      let contenttabs = document.getElementsByClassName("enginneeringtab");
-      for (let i = 0; i < subtabs.length; i++) {
-         (subtabs[i] as HTMLElement).style.display = "none";
-         console.log("Hiding sidebar subtab...")
-       }
-       for (let i = 0; i < contenttabs.length; i++) {
-        (contenttabs[i] as HTMLElement).style.display = "none";
-        console.log("Hiding content tab...")
-      }
-      for (let i = 0; i < sideitems.length; i++) {
-        (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-        console.log("Hiding sidebar subtab...")
-      }
-      
-        document.getElementById(it)!.style.display = "block";
-        document.getElementById(parent)!.classList.add("active-sideitem");
-        document.getElementById(contenttabid)!.style.display = "block";
-      
-        
-    }
-    return gotoandopen; 
-  }
\ No newline at end of file

src/utils/openElement.ts

+export function openElement({
+    elementToOpen, 
+    classToHide,  /* tabcontent */
+    elementToClose, 
+    buttonClass, /* = "tablinks" */ 
+    eventTargetClass = "active"
+  }: {
+    elementToOpen: string,
+    classToHide: string, 
+    classToClose?: string, 
+    elementToClose?: string, 
+    buttonClass?: string, 
+    eventTargetClass?: string
+  }) {
+    const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      let i, elementsToHide, elementsToClose, tabLinks;
+  
+      // Hide all elements with the classToHide (e.g., "tabcontent")
+      elementsToHide = document.getElementsByClassName(classToHide);
+      for (i = 0; i < elementsToHide.length; i++) {
+        (elementsToHide[i] as HTMLElement).style.display = "none";
+      }
+  
+      // If elementToClose is provided, hide these elements too (optional)
+      if (elementToClose) {
+        elementsToClose = document.getElementsByClassName(elementToClose);
+        for (i = 0; i < elementsToClose.length; i++) {
+          (elementsToClose[i] as HTMLElement).style.display = "none";
+        }
+      }
+  
+      // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
+      if (buttonClass) {
+        tabLinks = document.getElementsByClassName(buttonClass);
+        for (i = 0; i < tabLinks.length; i++) {
+          tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
+        }
+      }
+  
+      // Display the element to open (elementToOpen, e.g., a city tab or content section)
+      const element = document.getElementById(elementToOpen);
+      if (element) {
+        element.style.display = "block";
+      }
+  
+      // Add the "active" class to the clicked element
+      event.currentTarget.className += ` ${eventTargetClass}`;
+    };
+  
+    return openElement;
+  }
+  
\ No newline at end of file

src/utils/openThem.ts

+export function openThem({it}: {it: string}){
+    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+
+      console.log("it classname: " + document.getElementById(it)?.className)
+      console.log("it: " + it)
+      let contenttabid = "tab-" + it; 
+      let parent = "parent-" + it; 
+      console.log("we want to open " + it + " and " + contenttabid)
+      let sideitems = document.getElementsByClassName("sideitem"); 
+      let subtabs = document.getElementsByClassName("sidesubtab");
+      let contenttabs = document.getElementsByClassName("enginneeringtab");
+      for (let i = 0; i < subtabs.length; i++) {
+         (subtabs[i] as HTMLElement).style.display = "none";
+         console.log("Hiding sidebar subtab...")
+       }
+       for (let i = 0; i < contenttabs.length; i++) {
+        (contenttabs[i] as HTMLElement).style.display = "none";
+        console.log("Hiding content tab...")
+      }
+      for (let i = 0; i < sideitems.length; i++) {
+        (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+        console.log("Hiding sidebar subtab...")
+      }
+      
+        document.getElementById(it)!.style.display = "block";
+        document.getElementById(parent)!.classList.add("active-sideitem");
+        document.getElementById(contenttabid)!.style.display = "block";
+      
+        
+    }
+    return gotoandopen; 
+  }
\ No newline at end of file