diff --git a/app/javascript/src/javascripts/notes.js b/app/javascript/src/javascripts/notes.js
index e6e186545..bbcc45f46 100644
--- a/app/javascript/src/javascripts/notes.js
+++ b/app/javascript/src/javascripts/notes.js
@@ -423,14 +423,7 @@ let Note = {
     },
 
     toggle_all: function() {
-      var $note_container = $(".note-container");
-      var is_hidden = ($note_container.css('visibility') === 'hidden');
-
-      if (is_hidden) {
-        $note_container.css('visibility', 'visible');
-      } else {
-        $note_container.css('visibility', 'hidden');
-      }
+      $(".note-container").toggleClass("hide-notes");
     }
   },
 
@@ -850,7 +843,7 @@ let Note = {
         Note.create(x, y, w, h);
       }
 
-      $(".note-container").css('visibility', 'visible');
+      $(".note-container").removeClass("hide-notes");
       e.stopPropagation();
       e.preventDefault();
     },
diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss
index bab2c00b3..361464114 100644
--- a/app/javascript/src/styles/specific/notes.scss
+++ b/app/javascript/src/styles/specific/notes.scss
@@ -2,6 +2,10 @@
   display: inline-block;
   position: relative;
 
+  &.hide-notes .note-box {
+    visibility: hidden;
+  }
+
   div.note-body {
     position: absolute;
     border: var(--note-body-border);