merged openTab

src/components/Buttons.tsx

@@ -116,7 +116,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
 export function HPMoreButton({name}: {name: string}){
   let c = "timelinepersontabs"
   return(
-    <button className="tablinks hp-more-button" onClick={openTab({cityName: name, cla: c})}> More</button>
+    <button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
   )
 }
 
@@ -212,45 +212,6 @@ export function ButtonFourRotate(){
 }
 
 
-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>) => {
-   
-    console.log(document.getElementById(it)?.className)
-    let tabcontent = document.getElementsByClassName("col outreach");
-    for (let i = 0; i < tabcontent.length; i++) {
-       (tabcontent[i] as HTMLElement).style.display = "none";
-     }
-    
-      document.getElementById(it)!.style.display = "block";
-    
-    event.currentTarget.className += " active";
-  }
-  return openit; 
-}
- */
 
 
 

src/contents/human-practices.tsx

@@ -50,13 +50,14 @@
             */
 import { TimeHori } from "../components/HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import {  ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
+import {  ButtonOne, TabButtonRow } 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';
 import React, { useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import { openElement } from "../utils/openElement";
 
 
 let timelinebuttonrowdata = [
@@ -715,7 +716,7 @@ let timelinepersontabs =[
 
 
 export function HumanPractices() {
-  openTab({cityName: "All", cla: "timelinecardtabs"}); 
+  openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", }); 
   const location = useLocation();
 
     useEffect(() => {