1 files changed, 11 insertions, 7 deletions

diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 3492f19c996..f751df6367e 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -23,7 +23,8 @@ export default class SingleFileDiff {
     this.file = file;
     this.toggleDiff = this.toggleDiff.bind(this);
     this.content = $('.diff-content', this.file);
-    this.$toggleIcon = $('.diff-toggle-caret', this.file);
+    this.$chevronRightIcon = $('.diff-toggle-caret .chevron-right', this.file);
+    this.$chevronDownIcon = $('.diff-toggle-caret .chevron-down', this.file);
     this.diffForPath = this.content.find('[data-diff-for-path]').data('diffForPath');
     this.isOpen = !this.diffForPath;
     if (this.diffForPath) {
@@ -34,13 +35,13 @@ export default class SingleFileDiff {
         .hide();
       this.content = null;
       this.collapsedContent.after(this.loadingContent);
-      this.$toggleIcon.addClass('fa-caret-right');
+      this.$chevronRightIcon.removeClass('gl-display-none');
     } else {
       this.collapsedContent = $(WRAPPER)
         .html(COLLAPSED_HTML)
         .hide();
       this.content.after(this.collapsedContent);
-      this.$toggleIcon.addClass('fa-caret-down');
+      this.$chevronDownIcon.removeClass('gl-display-none');
     }
 
     $('.js-file-title, .click-to-expand', this.file).on('click', e => {
@@ -52,20 +53,23 @@ export default class SingleFileDiff {
     if (
       !$target.hasClass('js-file-title') &&
       !$target.hasClass('click-to-expand') &&
-      !$target.hasClass('diff-toggle-caret')
+      !$target.closest('.diff-toggle-caret').length > 0
     )
       return;
     this.isOpen = !this.isOpen;
     if (!this.isOpen && !this.hasError) {
       this.content.hide();
-      this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
+      this.$chevronRightIcon.removeClass('gl-display-none');
+      this.$chevronDownIcon.addClass('gl-display-none');
       this.collapsedContent.show();
     } else if (this.content) {
       this.collapsedContent.hide();
       this.content.show();
-      this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
+      this.$chevronDownIcon.removeClass('gl-display-none');
+      this.$chevronRightIcon.addClass('gl-display-none');
     } else {
-      this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
+      this.$chevronDownIcon.removeClass('gl-display-none');
+      this.$chevronRightIcon.addClass('gl-display-none');
       return this.getContentHTML(cb);
     }
   }