symptoms etc collapsible fix

src/components/Tabs.tsx

@@ -2,11 +2,16 @@
 export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
     let rows = []
     for ( let i = 0;  i < data.length; i++ ){
-      rows.push(
-        <div id={data[i].cssname} className={cla}>
-            {data[i].node}
-        </div>
-      )
+      if(data[i].main == true){
+        rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}>
+          {data[i].node}
+        </div>)
+      }
+      else{
+        rows.push(<div id={data[i].cssname} className={cla} style={{display: "none"}}>
+          {data[i].node}
+        </div>)
+      }
     }
     return rows; 
   }

src/components/seclarations.ts

@@ -22,6 +22,7 @@ interface Window {
     node: React.ReactNode, 
     cssname: string, 
     buttonname: string
+    main?: Boolean; 
 }
 }
 

src/contents/description.tsx

@@ -2,7 +2,7 @@ import { InfoBox } from "../components/Boxes";
 import { TabButtonRow } from "../components/Buttons";
 import Collapsible from "../components/Collapsible";
 import { SupScrollLink } from "../components/ScrollLink";
-import { H2} from "../components/Headings";
+import { H2, H4} from "../components/Headings";
 import { LoremMedium, LoremShort } from "../components/Loremipsum";
 import { Circle } from "../components/Shapes";
 import { Complex } from "../components/Svgs";
@@ -11,6 +11,7 @@ import PieChart from "../components/Graph";
 import PreCyse from "../components/precyse";
 import { useNavigateTabs } from "../utils/navigation";
 import { Section, Subesction } from "../components/sections";
+import { main } from "@popperjs/core";
 
 export function Description() { 
     useNavigateTabs();
@@ -77,7 +78,10 @@ export function Description() {
                 </Subesction>
                 <Subesction title="Symptoms" id="Cystic Fibrosis4">
                     <p>Text about symptoms</p>
-                    <Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > Child </Collapsible>
+                    <Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" >
+                    <TabButtonRow data={symptombuttonrowdata} opentype="meditabs" closing=""/>
+                    <ButtonRowTabs data={symptombuttonrowdata} cla="meditabs"/> 
+                    </Collapsible>
                 </Subesction>
                 <Subesction title="Diagnosis" id="Cystic Fibrosis5">
                     <p>About the ways one can be diagnosed <LoremMedium/></p> 
@@ -94,8 +98,8 @@ export function Description() {
                 <Subesction title="Treatment" id="Cystic Fibrosis6">
                     <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> 
                     <Collapsible id="drugs-collapsible" title="Different types of drugs" >
-                    <TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
-                    <ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
+                    <TabButtonRow data={medibuttonrowdata} opentype="symptabs" closing=""/>
+                    <ButtonRowTabs data={medibuttonrowdata} cla="symptabs"/>
                     </Collapsible>
                     <p>Why we still need other options</p>
                     <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/> 
@@ -457,19 +461,40 @@ export function Description() {
 
  let medibuttonrowdata =[
     {
-        node: <H2 id="about-btn" text="About"/>, 
+        node: <H4 id="about-btn" text="About"/>, 
         buttonname: "About", 
-        cssname: "First"
+        cssname: "Med-First",
+        main: true
         
     },
     {   
-        node: <H2 id="modulator-btn" text="Modulators"/>,
+        node: <H4 id="modulator-btn" text="Modulators"/>,
         buttonname: "Modulators", 
         cssname: "modulators"
     },
     {
-        node: <H2 id="inhalator-btn" text="Inhalations"/>, 
+        node: <H4 id="inhalator-btn" text="Inhalations"/>, 
         buttonname: "Inhalations", 
         cssname: "inhalations"
     },
 ]
+
+let symptombuttonrowdata = [
+    {
+        node: <H4 id="about-btn" text="About"/>, 
+        buttonname: "About", 
+        cssname: "Symp-First",
+        main: true
+        
+    },
+    {   
+        node: <H4 id="lungs-btn" text="Lungs"/>,
+        buttonname: "Lungs", 
+        cssname: "lungs"
+    },
+    {
+        node: <H4 id="pancreas-btn" text="Pancreas"/>, 
+        buttonname: "Pancreas", 
+        cssname: "pancreas"
+    },
+]
\ No newline at end of file