diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js
index 73e4a24d7..f55dd0df9 100644
--- a/public/js/components/Cis/Profil/MitarbeiterProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js
@@ -13,7 +13,8 @@ export default {
   data() {
     return {
       
-      showCollapsedColumn: true,
+      collapseIconFunktionen: true,
+      collapseIconBetriebsmittel: true,
       funktionen_table_options: {
         
         height:300,
@@ -34,7 +35,7 @@ export default {
          //? option when wanting to hide the collapsed list
             
          {
-            title: "<i id='collapseIcon' role='button' class='fa-solid fa-angle-down  '></i>",
+            title: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down  '></i>",
             field: "collapse",
             headerSort: false,
             headerFilter:false,
@@ -69,6 +70,15 @@ export default {
         responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
         data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
         columns: [
+          {
+            title: "<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down  '></i>",
+            field: "collapse",
+            headerSort: false,
+            headerFilter:false,
+            formatter:"responsiveCollapse",
+            maxWidth:40,
+            headerClick:this.collapseFunction,
+          }, 
           {
             title: "Betriebsmittel",
             field: "betriebsmittel",
@@ -101,37 +111,33 @@ export default {
       });
     },
     collapseFunction (e, column){
-      
-     
-      this.showCollapsedColumn = !this.showCollapsedColumn;
-      
 
+      //* the if of the column has to match with the name of the responsive data in the vue component
+      this[e.target.id] = !this[e.target.id];
 
+      //* gets all event icons of the different rows to use the onClick event later
+      let allClickableIcons = column._column.cells.map(row => {
+        return row.element.children[0];
+      });
+      
       //* changes the icon that shows or hides all the collapsed columns
-      if(this.showCollapsedColumn){
+      //* if the replace function does not find the class to replace, it just simply returns false
+      if(this[e.target.id]){
         e.target.classList.replace("fa-angle-up","fa-angle-down");
       }else{
         e.target.classList.replace("fa-angle-down","fa-angle-up");
       }
       
       //* changes the icon for every collapsed column to open or closed
-      [...document.getElementsByClassName("tabulator-responsive-collapse-toggle")].forEach(ele => {
-        if(this.showCollapsedColumn){
-            if(!ele.classList.contains("open"))
-              ele.click();
+        if(this[e.target.id]){
+          allClickableIcons.filter(column => {
+            return !column.classList.contains("open");
+          }).forEach(col => {col.click();})
         }else{
-          if(ele.classList.contains("open"))
-            ele.click();
+          allClickableIcons.filter(column => {
+            return column.classList.contains("open");
+          }).forEach(col => {col.click();})
         }
-        
-        
-        });
-
-        /* console.log(this);
-        
-        this.showCollapsedColumn = !this.showCollapsedColumn;
-        console.log(this.showCollapsedColumn); */
-    
   },
   },
   
diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
index 7c6c42cfb..6ff3daeea 100644
--- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
@@ -8,7 +8,7 @@ export default {
   },
   data() {
     return {
-      
+      collapseIconFunktionen:true,
 
       funktionen_table_options: {
         height: 400,
@@ -28,14 +28,16 @@ export default {
           },
         ],
         columns: [
-         //? option when wanting to hide the collapsed list
-          /*  {
-            title: "",
-            field: "",
-            headerSort: false,
-            formatter:"responsiveCollapse",
-            maxWidth:20,
-          }, */
+         
+         {
+          title: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down  '></i>",
+          field: "collapse",
+          headerSort: false,
+          headerFilter:false,
+          formatter:"responsiveCollapse",
+          maxWidth:40,
+          headerClick:this.collapseFunction,
+        }, 
           { title: "Bezeichnung", field: "Bezeichnung", headerFilter: true,minWidth:200, },
           {
             title: "Organisationseinheit",
@@ -69,6 +71,35 @@ export default {
         this.data.foto_sperre = res.data.foto_sperre;
       });
     },
+    collapseFunction (e, column){
+
+      //* the if of the column has to match with the name of the responsive data in the vue component
+      this[e.target.id] = !this[e.target.id];
+
+      //* gets all event icons of the different rows to use the onClick event later
+      let allClickableIcons = column._column.cells.map(row => {
+        return row.element.children[0];
+      });
+      
+      //* changes the icon that shows or hides all the collapsed columns
+      //* if the replace function does not find the class to replace, it just simply returns false
+      if(this[e.target.id]){
+        e.target.classList.replace("fa-angle-up","fa-angle-down");
+      }else{
+        e.target.classList.replace("fa-angle-down","fa-angle-up");
+      }
+      
+      //* changes the icon for every collapsed column to open or closed
+        if(this[e.target.id]){
+          allClickableIcons.filter(column => {
+            return !column.classList.contains("open");
+          }).forEach(col => {col.click();})
+        }else{
+          allClickableIcons.filter(column => {
+            return column.classList.contains("open");
+          }).forEach(col => {col.click();})
+        }
+  },
   },
   computed: {
     get_image_base64_src() {
diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js
index 91dc80175..4e2beeb92 100644
--- a/public/js/components/Cis/Profil/StudentProfil.js
+++ b/public/js/components/Cis/Profil/StudentProfil.js
@@ -10,7 +10,7 @@ export default {
     return {
      
 
-    
+      collapseIconBetriebsmittel:true,
       betriebsmittel_table_options: {
         height: 300,
         layout: "fitColumns",
@@ -19,6 +19,15 @@ export default {
         responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
         data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
         columns: [
+          {
+            title: "<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down  '></i>",
+            field: "collapse",
+            headerSort: false,
+            headerFilter:false,
+            formatter:"responsiveCollapse",
+            maxWidth:40,
+            headerClick:this.collapseFunction,
+          }, 
           {
             title: "Betriebsmittel",
             field: "betriebsmittel",
@@ -54,6 +63,35 @@ export default {
         this.data.foto_sperre = res.data.foto_sperre;
       });
     },
+    collapseFunction (e, column){
+
+      //* the if of the column has to match with the name of the responsive data in the vue component
+      this[e.target.id] = !this[e.target.id];
+
+      //* gets all event icons of the different rows to use the onClick event later
+      let allClickableIcons = column._column.cells.map(row => {
+        return row.element.children[0];
+      });
+      
+      //* changes the icon that shows or hides all the collapsed columns
+      //* if the replace function does not find the class to replace, it just simply returns false
+      if(this[e.target.id]){
+        e.target.classList.replace("fa-angle-up","fa-angle-down");
+      }else{
+        e.target.classList.replace("fa-angle-down","fa-angle-up");
+      }
+      
+      //* changes the icon for every collapsed column to open or closed
+        if(this[e.target.id]){
+          allClickableIcons.filter(column => {
+            return !column.classList.contains("open");
+          }).forEach(col => {col.click();})
+        }else{
+          allClickableIcons.filter(column => {
+            return column.classList.contains("open");
+          }).forEach(col => {col.click();})
+        }
+  },
   },
   computed: {
     refreshMailTo() {