diff --git a/src/App/App.css b/src/App/App.css
index dac9ebe17a2219f5e0e17fa93c2cfd8e6f76c4be..d1ceee181459ee42382fc1f10fd8dcce359d6c58 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -2437,4 +2437,8 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
 #All {
   display: block;
+}
+
+.tabtabs, .tabbys{
+  display: none;
 }
\ No newline at end of file
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 3816114c19712b800e0c373569db92e98071d046..db9a5c564fba8890134291ddf07c0acce8f01815 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -79,11 +79,11 @@ export function HPButtonrow(){
   return(
       <>
       <div className="align-items-center bottom-buttons">
-          <button className="active" onClick={openTab({cityName: "All"})}> All</button>
-          <button  onClick={openTab({cityName: "Patient"})}> Patients</button>
-          <button  onClick={openTab({cityName: "Academia"})}> Academia</button>
-          <button  onClick={openTab({cityName: "Medical"})}> Medical professionals</button>
-          <button  onClick={openTab({cityName: "Industry"})}> Industry</button>
+          <button className="active" onClick={openTab({cityName: "All", cla: "tabtabs"})}> All</button>
+          <button  onClick={openTab({cityName: "Patient", cla: "tabtabs"})}> Patients</button>
+          <button  onClick={openTab({cityName: "Academia", cla: "tabtabs"})}> Academia</button>
+          <button  onClick={openTab({cityName: "Medical", cla: "tabtabs"})}> Medical professionals</button>
+          <button  onClick={openTab({cityName: "Industry", cla: "tabtabs"})}> Industry</button>
       </div>
       </>
   )
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 23f819ffc39c7987ac153eb51d583db7072c9ace..8e36bf86041f5c1873399f7beb866839a6cce4ea 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,9 +1,9 @@
 
-export function BFHStyleTabs({data}: {data: Array<NodeDatensatz>}) {
+export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
     let rows = []
     for ( let i = 0;  i < data.length; i++ ){
       rows.push(
-        <div id={data[i].eid} className="tabcontent">
+        <div id={data[i].eid} className={cla}>
             {data[i].node}
         </div>
       )
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index 2db4d491cc4b91e721282ec1a83da73aa5c2e8b9..f4d7652191cc87094efd58fa741aba69f0c998d4 100644
--- a/src/contents/Bfh.tsx
+++ b/src/contents/Bfh.tsx
@@ -64,7 +64,7 @@ export function Bfh() {
 
         </div>
         <div className="col">
-          <BFHStyleTabs data={tabbys}></BFHStyleTabs>
+          <BFHStyleTabs data={tabbys} cla="tabcontent"></BFHStyleTabs>
         </div>
       </div>
       <div className="row">
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index e3a041202468763b672fa4ff109b3c901ba7103f..ae2e6a4e38a4131d636dfd79b5f896605b4fa375 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -104,21 +104,21 @@ let tabtabs = [
 ]
 
 export function HumanPractices() {
-  openTab({cityName: "All"}); 
+  openTab({cityName: "All", cla: "tabtabs"}); 
   return (  
     <>
     <HPButtonrow/>
     <AllPopus></AllPopus>
-    <BFHStyleTabs data={tabtabs}></BFHStyleTabs>
-    <BFHStyleTabs data={tabbys}></BFHStyleTabs>
+    <BFHStyleTabs cla="tabtabs" data={tabtabs}></BFHStyleTabs>
+    <BFHStyleTabs cla="tabbys" data={tabbys}></BFHStyleTabs>
     </>
-  );
+  );  
 }
 
-export function openTab({cityName}:{cityName: string}) {
+export function openTab({cityName, cla}:{cityName: string, cla: string}) {
   const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
     var i, tabcontent, tablinks;
-  tabcontent = document.getElementsByClassName("tabcontent");
+  tabcontent = document.getElementsByClassName(cla);
   for (i = 0; i < tabcontent.length; i++) {
     (tabcontent[i] as HTMLElement).style.display = "none";
   }