merged openIt

src/components/Buttons.tsx

@@ -212,28 +212,6 @@ export function ButtonFourRotate(){
 }
 
 
-
-
-export function openIt({whattoopen, classnamewhattoopen, whattoclose}: {whattoopen: string, classnamewhattoopen: string, whattoclose?: string }){
-  const openit =  (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-    var i, tabcontent, wegcontent;
-    console.log(document.getElementById(whattoopen)?.className)
-    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;

src/contents/engineering.tsx

 
-import { ButtonOneEngineering, openIt } from "../components/Buttons";
+import { ButtonOneEngineering } from "../components/Buttons";
 import { LoremShort } from "../components/loremipsum";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import { openElement } from "../utils/openElement";
 
 
 export function Engineering() {
@@ -203,7 +204,7 @@ export function EngineeringCycleTab(){
        <g
           id="g25"
           transform="translate(7.500978,3.0504898)">
-            <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "designing", classnamewhattoopen: "cycletab"})}>
+            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
          <path
             className="cls-7"
             d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23"
@@ -221,7 +222,7 @@ export function EngineeringCycleTab(){
              id="polygon25"
             style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
             transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" />
-            <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "learning", classnamewhattoopen: "cycletab"})}>
+            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "learning", classToHide: "cycletab"})}>
             <path
               className="cls-12"
               d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6"
@@ -248,7 +249,7 @@ export function EngineeringCycleTab(){
             style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
             inkscape:transform-center-x="3.6173751"
             inkscape:transform-center-y="5.1978852" />
-            <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "testing", classnamewhattoopen: "cycletab"})}>
+            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "testing", classToHide: "cycletab"})}>
          <path
             className="cls-9"
             d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749"
@@ -273,7 +274,7 @@ export function EngineeringCycleTab(){
              id="polygon25-6"
             style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
             transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" />
-            <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "building", classnamewhattoopen: "cycletab"})}>
+            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "building", classToHide: "cycletab"})}>
           <path
             className="cls-11"
             d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834"
@@ -294,7 +295,7 @@ export function EngineeringCycleTab(){
           id="polygon22"
           style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}}
           transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
-          <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "designing", classnamewhattoopen: "cycletab"})}>
+          <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
        <text
           
           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
@@ -305,7 +306,7 @@ export function EngineeringCycleTab(){
           id="tspan29" /></textPath></text> </a>
      </g>
    </g>
-   <a  typeof="button" className="svg-button" onClick={openIt({whattoopen: "overview", classnamewhattoopen: "cycletab"})}>
+   <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "overview", classToHide: "cycletab"})}>
    <circle
      style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}}
      id="path1"