openThem.ts

export function openThem({it, scrollToId}: {it: string, scrollToId?: 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");
      
      // Verstecke alle Subtabs und Content-Tabs
      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...");
      }
      
      // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
      document.getElementById(it)!.style.display = "block";
      document.getElementById(parent)!.classList.add("active-sideitem");
      document.getElementById(contenttabid)!.style.display = "block";

      // Scrolle zu der angegebenen ID, falls vorhanden
      if (scrollToId && document.getElementById(scrollToId)) {
          console.log("Scrolling to: " + scrollToId);
          document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
      }
  };
  return gotoandopen;
}