diff --git a/app/assets/javascripts/annotations.js b/app/assets/javascripts/annotations.js
index cce36e7c9..9380f2b80 100644
--- a/app/assets/javascripts/annotations.js
+++ b/app/assets/javascripts/annotations.js
@@ -1342,8 +1342,10 @@ var submitNewAnnotation = function (comment, shared_comment, global_comment, val
 
       // Logic to render annotation boxes, not applicable to global annotations
       if (!global_comment) {
-        $("#annotation-line-" + lineInd).append(newAnnotationBox(data));
-        refreshAnnotations();
+        if (!commentsVisible()) {
+          $("#annotation-line-" + lineInd).append(newAnnotationBox(data));
+          refreshAnnotations();
+        }
 
         if (!annotationsByPositionByLine[currentHeaderPos]) {
           annotationsByPositionByLine[currentHeaderPos] = {};
@@ -1569,3 +1571,22 @@ function renderPdf() {
     console.log("Error occurred", error);
   });
 }
+
+function commentsVisible() {
+  let hideButton = document.getElementById("hideAnnotations");
+  return window.getComputedStyle(hideButton).display === "none";
+}
+
+function hideAnnotations() {
+  document.getElementById("hideAnnotations").style.display = "none";
+  document.getElementById("showAnnotations").style.display = "inline-flex";
+  $(".annotation-line").not(".base-annotation-line").remove();
+  refreshAnnotations();
+}
+
+function showAnnotations() {
+  document.getElementById("showAnnotations").style.display = "none";
+  document.getElementById("hideAnnotations").style.display = "inline-flex";
+  displayAnnotations();
+  refreshAnnotations();
+}
diff --git a/app/views/submissions/view.html.erb b/app/views/submissions/view.html.erb
index ab6619b6e..8b8b776b9 100755
--- a/app/views/submissions/view.html.erb
+++ b/app/views/submissions/view.html.erb
@@ -129,6 +129,8 @@
       <a href="<%= download_file_url(@submission) %>" class="btn small" title="Download">Download</a>
       <button class="btn small" onclick="resetLayout()">Reset Layout</button>
       <%= render "release_grades" %>
+      <button id="hideAnnotations" class="btn small" onclick="hideAnnotations()">Hide Comments</button>
+      <button id="showAnnotations" style="display: none;" class="btn small" onclick="showAnnotations()">Show Comments</button>
     </div>
 
     <div class="col s2 center-align">
@@ -144,6 +146,8 @@
   <div class="row">
     <div class="col s12 center-align valign-wrapper">
       <button class="btn small" onclick="resetLayout()">Reset Layout</button>
+      <button id="hideAnnotations" class="btn small" onclick="hideAnnotations()">Hide Comments</button>
+      <button id="showAnnotations" style="display: none;" class="btn small" onclick="showAnnotations()">Show Comments</button>
     </div>
   </div>