diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
index 7b63fdef7..a00c71fb5 100644
--- a/app/javascript/controllers/collapsible_columns_controller.js
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -5,8 +5,8 @@ export default class extends Controller {
   static targets = [ "column", "button" ]
 
   toggle({ target }) {
-    const clickedColumn = target.closest('[data-collapsible-columns-target="column"]')
-    this.#expandOnly(clickedColumn);
+    const column = target.closest('[data-collapsible-columns-target="column"]')
+    this.#toggleColumn(column);
   }
 
   preventToggle(event) {
@@ -15,9 +15,14 @@ export default class extends Controller {
     }
   }
 
-  #expandOnly(clickedColumn) {
-    this.#collapseAllExcept(clickedColumn);
-    this.#expand(clickedColumn)
+  #toggleColumn(column) {
+    this.#collapseAllExcept(column)
+
+    if (this.#isCollapsed(column)) {
+      this.#expand(column)
+    } else {
+      this.#collapse(column)
+    }
   }
 
   #collapseAllExcept(clickedColumn) {
@@ -28,6 +33,10 @@ export default class extends Controller {
     })
   }
 
+  #isCollapsed(column) {
+    return column.classList.contains(this.collapsedClass)
+  }
+
   #collapse(column) {
     this.#buttonFor(column).setAttribute("aria-expanded", "false")
     column.classList.add(this.collapsedClass)