The routing in the collapsible works now

src/components/makeSources.tsx

@@ -59,7 +59,7 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
 
   // Parse BibTeX on component mount or when sources change
   useEffect(() => {
-    console.log("Parsing BibTeX sources: ", bibtexSources);
+    //console.log("Parsing BibTeX sources: ", bibtexSources);
 
     try {
       const allEntries: BibEntry[] = [];
@@ -79,7 +79,7 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
 
   // Helper function to render AUTHORS
   const formatAuthors = (authors: string): string => {
-    console.log("Original input:", authors);
+    //console.log("Original input:", authors);
 
     // Bereinigen des Eingabestrings und Ersetzen von "and" durch "|"
     const cleanedAuthors = authors
@@ -87,43 +87,43 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
         .replace(/\{|\}/g, "")      // geschweifte Klammern entfernen
         .trim();
     
-    console.log("Cleaned authors string:", cleanedAuthors);
+    //console.log("Cleaned authors string:", cleanedAuthors);
 
     // Autoren in ein Array aufteilen
     const authorList = cleanedAuthors.split("|").map(author => author.trim());
-    console.log("Split author list:", authorList);
+    //console.log("Split author list:", authorList);
 
     // Maximale Anzahl der anzuzeigenden Autoren
     const maxAuthors = 7;
 
     // Formatiere jeden Autor
-    const formattedAuthors = authorList.map((author, index) => {
-        console.log(`Processing author #${index + 1}:`, author);
+    const formattedAuthors = authorList.map((author, _index) => {
+        //console.log(`Processing author #${index + 1}:`, author);
 
         // Nachname und Vornamen aufteilen
         const [last, firstNames] = author.includes(",") ? 
             author.split(",").map(part => part.trim()) :
             ['', author]; // Wenn kein Komma vorhanden ist, wird der gesamte Name als Vorname behandelt
 
-        console.log(`Last name: "${last}", First names: "${firstNames}"`);
+       // console.log(`Last name: "${last}", First names: "${firstNames}"`);
 
         // Initialen für Vornamen erstellen
         const initials = firstNames.split(' ').map(n => n[0] + '.').join(' '); 
-        console.log(`Initials for "${firstNames}": "${initials}"`);
+        //console.log(`Initials for "${firstNames}": "${initials}"`);
 
         const formattedName = `${last}, ${initials}`.trim(); // Rückgabe des formatierten Namens
-        console.log(`Formatted name: "${formattedName}"`);
+        //console.log(`Formatted name: "${formattedName}"`);
 
         return formattedName;
     });
 
-    console.log("Formatted authors before adding et al.:", formattedAuthors);
+    //console.log("Formatted authors before adding et al.:", formattedAuthors);
 
     // Kombiniere die formatierten Autoren mit korrekter Interpunktion
     const output = formattedAuthors.slice(0, maxAuthors).join('; ') + 
                    (formattedAuthors.length > maxAuthors ? ' et al.' : '');
     
-    console.log("Final output:", output);
+    //console.log("Final output:", output);
     return output;
 };
 

src/utils/TabNavigation.ts

@@ -4,6 +4,7 @@ import { openFromOtherPage } from './openFromOtherpAge';
 import { handleScroll } from './handleScroll';
 import { openNestedTab } from './openNestedTab';
 import { openTab } from './openTab';
+import { openTabInCollapsible } from './opentabincollapsible';
 
 // Custom Hook for central tab navigation
 export const useTabNavigation = () => {
@@ -11,6 +12,8 @@ export const useTabNavigation = () => {
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
   
+  const [activeCollapsible, setActiveCollapsible] = useState<string | null>(null);
+  const [activeTabInCollapsible, setActiveTabInCollapsible] = useState<string | null>(null);
 
   // tab change and url update
   
@@ -23,11 +26,18 @@ export const useTabNavigation = () => {
     const collapseId = params.get('collapseId');
     const scrollToId = params.get('scrollTo'); 
     const changeTo = params.get('changeTo');
+    const colTab = params.get('colTab');
     
      // scrolls to a specific collapsible element
      if (collapseId) {
+      setActiveCollapsible(collapseId);
       handleScroll(collapseId); // This triggers the scroll action
     }
+    if (colTab && collapseId) {
+      setActiveCollapsible(collapseId);
+      openTabInCollapsible(colTab, collapseId); // Öffne den Tab innerhalb des Collapsibles
+ 
+    }
 
     // opens main and (if necessary) subtab
     if (tabId) {

src/utils/openTab.ts

 // function to open a main tab
+
 export const openTab = (tabId: string, tabClass: string) => {
-    console.log((document.getElementById(tabId) as HTMLElement).classList[1])
-    console.log(`tabclass is ${tabClass}`)
+  console.log(`Versuche, Tab mit ID ${tabId} zu finden`);
+  const selectedTab = document.querySelector(`#${tabId}`);
+  if (selectedTab) {
+    console.log('Tab gefunden!');
     const tabs = document.getElementsByClassName(tabClass);
     for (let index = 0; index < tabs.length; index++) {
       (tabs[index] as HTMLElement).style.display = 'none';
-      
     }
     const selectedTab = document.getElementById(tabId);
     if (selectedTab) {
       selectedTab.style.display = 'block';
+      selectedTab.style.visibility = 'visible';
+      selectedTab.style.position = 'relative';  // Falls es ein Positionierungsproblem gibt
+      selectedTab.style.zIndex = '10'; 
     }
-  };
\ No newline at end of file
+  } else {
+    console.error(`Tab mit ID ${tabId} wurde nicht gefunden.`);
+  }
+};
+

src/utils/opentabincollapsible.ts

-import { openTab } from "./openTab";
-import { handleScroll } from "./handleScroll";
+export const openTabInCollapsible = (tabId: string, collapsibleId: string) => {
+    // Warten Sie, bis das DOM vollständig geladen wurde
+    setTimeout(() => {
+        // Holen Sie sich das Collapsible
+        const collapsible = document.getElementById(collapsibleId);
+        if (!collapsible) {
+            console.error(`Collapsible mit ID ${collapsibleId} nicht gefunden!`);
+            return;
+        }
 
-// Funktion, um einen Tab in einem Collapsible zu öffnen
-export const openTabInCollapsible = (
-  collapsibleId: string,     // ID des Collapsibles
-  tabId: string,             // ID des zu öffnenden Tabs
-  collapsibleClass: string,  // Klasse des Collapsibles (z. B. für das Styling)
-  tabClass: string           // Klasse des Tabs (z. B. für das Styling)
-) => {
-  // Öffne das Collapsible (falls es geschlossen ist)
-  const collapsible = document.getElementById(collapsibleId);
-  if (collapsible && collapsible.classList.contains('collapsed')) {
-    collapsible.classList.remove('collapsed'); // Öffne das Collapsible
-  }
+        // Loggen Sie das, um sicherzustellen, dass das Collapsible korrekt gefunden wird
+        console.log(`Collapsible mit ID ${collapsibleId} gefunden`);
 
-  // Stelle sicher, dass wir zu diesem Collapsible scrollen
-  handleScroll(collapsibleId);
+        // Überprüfen Sie, ob der Tab mit der gegebenen ID existiert
+        const tab = collapsible.querySelector(`#${tabId}`);
+        if (!tab) {
+            console.error(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wurde nicht gefunden!`);
+            return;
+        }
+        let tabClass = tab!.className; 
+        const tabs = document.getElementsByClassName(tabClass);
+        for (let index = 0; index < tabs.length; index++) {
+            (tabs[index] as HTMLElement).style.display = 'none';
+          }
+        // Wenn der Tab gefunden wurde, stellen Sie sicher, dass der Tab sichtbar gemacht wird
+        console.log(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wird jetzt geöffnet.`);
+        (tab as HTMLElement).style.display = 'block';
+        (tab as HTMLElement).style.visibility = 'visible';
+        (tab as HTMLElement).style.position = 'relative';  // Falls es ein Positionierungsproblem gibt
+        (tab as HTMLElement).style.zIndex = '10';  // Stelle sicher, dass der Tab über anderen Elementen liegt
 
-  // Öffne den entsprechenden Tab innerhalb des Collapsibles
-  openTab(tabId, tabClass);
 
-  // Optional: Wir können auch zu diesem Tab scrollen, wenn nötig
-  const selectedTab = document.getElementById(tabId);
-  if (selectedTab) {
-    const elementTop = selectedTab.getBoundingClientRect().top + window.pageYOffset;
-    const offset = window.innerHeight / 2 - selectedTab.offsetHeight / 2;
-    const scrollPosition = elementTop - offset;
+        // Loggen Sie den Stil des Tabs, um zu überprüfen, ob er tatsächlich auf 'block' gesetzt wurde
+        console.log(`Tab-Display-Stil für ${tabId}: ${(tab as HTMLElement).style.display}`);
 
-    window.scrollTo({
-      top: scrollPosition,
-      behavior: 'smooth',
-    });
-  }
+    }, 100); // 100 ms Verzögerung für DOM-Ladezeit
 };