tabs

src/App/App.css

@@ -2534,11 +2534,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
   display: flex !important;
 }
 
-#All, #MediAbout {
-  display: block;
+.FirstTab{
+  display: block !important;
 }
-
-.tabtabs, .tabbys, .meditabs, .timelinecardtabs, .timelinepersontabs{
+.tabcontent{
   display: none;
 }
 

src/components/Tabs.tsx

-// If new cla (class) is added it has to be added to css giving it display: none; as default
-// The main tab has to be given display: block; via id css
+// The main tab has to be given display: block; via id css or be given the id "First"
 export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
     let rows = []
+    let classy = "tabcontent " + cla; 
     for ( let i = 0;  i < data.length; i++ ){
+      if (i === 1){
+        classy += " First"
+      }
       rows.push(
-        <div id={data[i].cssname} className={cla}>
+        <div id={data[i].cssname} className={classy}>
             {data[i].node}
         </div>
       )
@@ -13,9 +16,13 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: stri
   }
   export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
     let rows = []
+    let classy = "tabcontent " + cla; 
     for ( let i = 0;  i < data.length; i++ ){
+      if (i === 1){
+        classy += " First"
+      }
       rows.push(
-        <div id={data[i].cssname} className={cla}>
+        <div id={data[i].cssname} className={classy}>
             {data[i].node}
         </div>
       )

src/contents/description.tsx

@@ -276,7 +276,7 @@ export function Description() {
     {
         node: <div>About</div>, 
         buttonname: "About", 
-        cssname: "MediAbout"
+        cssname: "First"
         
     },
     {   

src/contents/human-practices.tsx

@@ -16,7 +16,7 @@ let timelinebuttonrowdata = [
   {
     buttonname: "All", 
     node: <TimeHori tab="" ></TimeHori>, 
-    cssname: "All"
+    cssname: "First"
   },
   { 
     node: <TimeHori tab="Patient" ></TimeHori>,
@@ -25,7 +25,7 @@ let timelinebuttonrowdata = [
   },
   {
     node: <TimeHori tab="Medical Professional" ></TimeHori>,
-    buttonname: "Mediacl Professionals", 
+    buttonname: "Medical Professionals", 
     cssname: "Medical"
   },
   {