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; 
  }