2 files changed, 21 insertions, 8 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 37822dac064..22032d0f914 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -288,7 +288,11 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           if (anchor) {
             const notesContent = anchor.closest('.notes_content');
             const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-            notes.addDiffNote(anchor, lineType, false);
+            notes.toggleDiffNote({
+              target: anchor,
+              lineType,
+              forceShow: true,
+            });
             anchor[0].scrollIntoView();
             // We have multiple elements on the page with `#note_xxx`
             // (discussion and diff tabs) and `:target` only applies to the first
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index e960f1e8018..67df1c0c4d7 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -860,10 +860,19 @@ const normalizeNewlines = function(str) {
       e.preventDefault();
       const $link = $(e.currentTarget || e.target);
       const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
-      this.addDiffNote($link, $link.data('lineType'), showReplyInput);
+      this.toggleDiffNote({
+        target: $link,
+        lineType: $link.data('lineType'),
+        showReplyInput
+      });
     };
 
-    Notes.prototype.addDiffNote = function(target, lineType, showReplyInput) {
+    Notes.prototype.toggleDiffNote = function({
+      target,
+      lineType,
+      forceShow,
+      showReplyInput = false,
+    }) {
       var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
       $link = $(target);
       row = $link.closest("tr");
@@ -908,12 +917,12 @@ const normalizeNewlines = function(str) {
         notesContent = targetRow.find(notesContentSelector);
         addForm = true;
       } else {
-        targetRow.show();
-        notesContent.toggle(!notesContent.is(':visible'));
+        const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+        const isForced = forceShow === true || forceShow === false;
+        const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-        if (!targetRow.find('.content:not(:empty)').is(':visible')) {
-          targetRow.hide();
-        }
+        targetRow.toggle(showNow);
+        notesContent.toggle(showNow);
       }
 
       if (addForm) {