diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index e76ba73b4a8..8494bb3e0a0 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -50,6 +50,7 @@ en:
   emails:
     incoming:
       default_subject: "Incoming email from %{email}"
+      show_trimmed_content: "Show trimmed content"
       errors:
         empty_email_error: "Happens when the raw mail we received was blank."
         no_message_id_error: "Happens when the mail has no 'Message-Id' header."
diff --git a/lib/email/receiver.rb b/lib/email/receiver.rb
index 27d05b95497..24eb6f7cffc 100644
--- a/lib/email/receiver.rb
+++ b/lib/email/receiver.rb
@@ -56,9 +56,14 @@ module Email
       @incoming_email.update_columns(user_id: user.id)
 
       body, elided = select_body
-
       body ||= ""
-      body << "\n\n[details=...]\n#{elided}\n[/details]" if elided.present?
+
+      if elided.present?
+        body << "\n\n" << "<details class='elided'>" << "\n"
+        body << "<summary title='#{I18n.t('emails.incoming.show_trimmed_content')}'>&#183;&#183;&#183;</summary>" << "\n"
+        body << elided << "\n"
+        body << "</details>" << "\n"
+      end
 
       raise AutoGeneratedEmailError if is_auto_generated?
       raise NoBodyDetectedError     if body.blank? && !@mail.has_attachments?
diff --git a/plugins/discourse-details/assets/javascripts/details_dialect.js b/plugins/discourse-details/assets/javascripts/details_dialect.js
index 4c80824d486..858f887a904 100644
--- a/plugins/discourse-details/assets/javascripts/details_dialect.js
+++ b/plugins/discourse-details/assets/javascripts/details_dialect.js
@@ -23,4 +23,6 @@
     return text;
   });
 
+  Discourse.Markdown.whiteListTag("details", "class", "elided");
+
 })();
diff --git a/plugins/discourse-details/assets/stylesheets/details.scss b/plugins/discourse-details/assets/stylesheets/details.scss
index f1de007d2aa..b183330956b 100644
--- a/plugins/discourse-details/assets/stylesheets/details.scss
+++ b/plugins/discourse-details/assets/stylesheets/details.scss
@@ -7,6 +7,11 @@ details .lightbox-wrapper {
   display: none;
 }
 
+details,
+summary {
+  outline: none;
+}
+
 summary:first-of-type {
   cursor: pointer;
   display: block;
@@ -36,3 +41,33 @@ summary::-webkit-details-marker {
 details .lazyYT-container {
   display: none;
 }
+
+
+.elided {
+  color: dark-light-choose(scale-color($primary, $lightness: 65%), scale-color($secondary, $lightness: 35%));
+
+  summary:before {
+    content: '' !important;
+  }
+
+  summary {
+    @include unselectable;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: #aaa;
+    background: #f1f1f1;
+    border: 1px solid #ddd;
+    width: 20px;
+    display: flex;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 12px;
+  }
+
+  summary:hover {
+    color: #222;
+    background: #d8d8d8;
+    border-color: #cdcdcd;
+  }
+}
diff --git a/plugins/discourse-details/plugin.rb b/plugins/discourse-details/plugin.rb
index c028cf305d6..41a1a61a713 100644
--- a/plugins/discourse-details/plugin.rb
+++ b/plugins/discourse-details/plugin.rb
@@ -1,6 +1,6 @@
 # name: discourse-details
 # about: HTML5.1 Details polyfill for Discourse
-# version: 0.3
+# version: 0.4
 # authors: Régis Hanol
 # url: https://github.com/discourse/discourse/tree/master/plugins/discourse-details
 
@@ -13,14 +13,15 @@ register_asset "stylesheets/details.scss"
 
 after_initialize do
 
-  # replace all details with their summary in emails
   Email::Styles.register_plugin_style do |fragment|
-    if SiteSetting.details_enabled
-      fragment.css("details").each do |details|
-        summary = details.css("summary")[0]
-        summary.name = "p"
-        details.replace(summary)
-      end
+    # remove all elided content
+    fragment.css("details.elided").each { |d| d.remove }
+
+    # replace all details with their summary in emails
+    fragment.css("details").each do |details|
+      summary = details.css("summary")[0]
+      summary.name = "p"
+      details.replace(summary)
     end
   end
 
diff --git a/spec/components/email/receiver_spec.rb b/spec/components/email/receiver_spec.rb
index 164d60cb46d..697231e4330 100644
--- a/spec/components/email/receiver_spec.rb
+++ b/spec/components/email/receiver_spec.rb
@@ -118,7 +118,7 @@ describe Email::Receiver do
 
     it "removes the 'on <date>, <contact> wrote' quoting line" do
       expect { process(:on_date_contact_wrote) }.to change { topic.posts.count }
-      expect(topic.posts.last.raw).to eq("This is the actual reply.\n\n[details=...]\nOn Tue, Jan 14, 2016 at 0:42 AM, Bar Foo <wat@discourse.org> wrote:\n\n> This is the previous email.\n> And it had\n>\n> a lot\n>\n>\n> of lines ;)\n[/details]")
+      expect(topic.posts.last.raw).to eq("This is the actual reply.\n\n<details class='elided'>\n<summary title='Show trimmed content'>&#183;&#183;&#183;</summary>\nOn Tue, Jan 14, 2016 at 0:42 AM, Bar Foo <wat@discourse.org> wrote:\n\n> This is the previous email.\n> And it had\n>\n> a lot\n>\n>\n> of lines ;)\n</details>")
     end
 
     it "removes the 'Previous Replies' marker" do
@@ -193,7 +193,7 @@ describe Email::Receiver do
 
     it "strips 'original message' context" do
       expect { process(:original_message) }.to change { topic.posts.count }
-      expect(topic.posts.last.raw).to eq("This is a reply :)\n\n[details=...]\n---Original Message---\nThis part should not be included\n[/details]")
+      expect(topic.posts.last.raw).to eq("This is a reply :)\n\n<details class='elided'>\n<summary title='Show trimmed content'>&#183;&#183;&#183;</summary>\n---Original Message---\nThis part should not be included\n</details>")
     end
 
     it "supports attached images" do