diff --git a/app/assets/javascripts/diff.js.coffee b/app/assets/javascripts/diff.js.coffee
index 6d9b364cb8d2e4f7d452202ec4d488c00769feb1..49c43c099836029d6eaff9eb49f69d660832d045 100644
--- a/app/assets/javascripts/diff.js.coffee
+++ b/app/assets/javascripts/diff.js.coffee
@@ -1,6 +1,8 @@
 class @Diff
   UNFOLD_COUNT = 20
   constructor: ->
+    $('.files .diff-file').singleDiff()
+
     $(document).off('click', '.js-unfold')
     $(document).on('click', '.js-unfold', (event) =>
       target = $(event.target)
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 894f80586f183803f8afece075038b018085cdd0..728ee5a2aa26c7e3dfe962d8f53cb8a51627ff21 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -160,6 +160,7 @@ class @MergeRequestTabs
         $('#diffs').html data.html
         gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'))
         $('#diffs .js-syntax-highlight').syntaxHighlight()
+        $('#diffs .diff-file').singleDiff()
         @expandViewContainer() if @diffViewType() is 'parallel'
         @diffsLoaded = true
         @scrollToElement("#diffs")
diff --git a/app/assets/javascripts/single_diff.js.coffee b/app/assets/javascripts/single_diff.js.coffee
new file mode 100644
index 0000000000000000000000000000000000000000..4d1c28c082b74022bf3663c19389646f293711ee
--- /dev/null
+++ b/app/assets/javascripts/single_diff.js.coffee
@@ -0,0 +1,52 @@
+class @SingleDiff
+
+  LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>'
+  ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>'
+
+  constructor: (@file) ->
+    @content = $('.diff-content', @file)
+    @diffForPath = @content.data 'diff-for-path'
+    @setOpenState()
+
+    $('.file-title > a', @file).on 'click', @toggleDiff
+
+  setOpenState: ->
+    if @diffForPath
+      @isOpen = false
+    else
+      @isOpen = true
+      @contentHTML = @content.html()
+    return
+
+  toggleDiff: (e) =>
+    e.preventDefault()
+    @isOpen = !@isOpen
+    if not @isOpen and not @hasError
+      @content.empty()
+      return
+    if @contentHTML
+      @setContentHTML()
+    else
+      @getContentHTML()
+    return
+
+  getContentHTML: ->
+    @content.html(LOADING_HTML).addClass 'loading'
+    $.get @diffForPath, (data) =>
+      if data.html
+        @setContentHTML data.html
+      else
+        @hasError = true
+        @content.html ERROR_HTML
+      @content.removeClass 'loading'
+    return
+
+  setContentHTML: (contentHTML) ->
+    @contentHTML = contentHTML if contentHTML
+    @content.html @contentHTML
+    @content.syntaxHighlight()
+
+$.fn.singleDiff = ->
+  return @each ->
+    if not $.data this, 'singleDiff'
+      $.data this, 'singleDiff', new SingleDiff this