diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
index 52a0d6fefea..00ad2e8fac7 100644
--- a/client/src/components/Tool/ToolTutorialRecommendations.vue
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -2,7 +2,7 @@
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, ref, set } from "vue";
 
 import { useToolTrainingMaterial } from "@/composables/toolTrainingMaterial";
 
@@ -34,6 +34,10 @@ const tutorialText = computed(() => {
         return "There is 1 tutorial available which uses this tool.";
     }
 });
+
+function toggleCategory(category: string) {
+    set(categoryOpen, category, !categoryOpen[category]);
+}
 </script>
 
 <template>
@@ -58,7 +62,7 @@ const tutorialText = computed(() => {
         </BButton>
         <GCollapse v-model="mainOpen">
             <div v-for="category in trainingCategories" :key="category">
-                <BButton class="ui-link ml-3" @click="categoryOpen[category] = !categoryOpen[category]">
+                <BButton class="ui-link ml-3" @click="toggleCategory(category)">
                     {{ category }} ({{ tutorialsInCategory(category).length }})
                     <FontAwesomeIcon :icon="faCaretDown" />
                 </BButton>