diff --git a/help/format-your-message-using-markdown.md b/help/format-your-message-using-markdown.md
index 156929acec..0f577769a9 100644
--- a/help/format-your-message-using-markdown.md
+++ b/help/format-your-message-using-markdown.md
@@ -76,25 +76,9 @@ whenever you need a reminder of the formatting syntax below.
 
 ## Spoilers
 
-You can use spoilers to hide content that you do not want to be visible until
-the user interacts with it.
+{!spoilers-intro.md!}
 
-
-~~~
-Normal content in message
-
-```spoiler Spoiler header
-Spoiler content. These lines won't be visible until the user expands the spoiler.
-```
-~~~
-
-The spoiler will initially display in a collapsed form:
-
-![Spoiler collapsed](/static/images/help/spoiler-collapsed.png)
-
-Clicking the arrow will expand the spoiler content:
-
-![Spoiler expanded](/static/images/help/spoiler-expanded.png)
+{!spoilers-examples.md!}
 
 ## Emoji and emoticons
 
diff --git a/help/include/sidebar_index.md b/help/include/sidebar_index.md
index f1e0c3493a..8d291ad7b8 100644
--- a/help/include/sidebar_index.md
+++ b/help/include/sidebar_index.md
@@ -68,6 +68,7 @@
 * [Bulleted and numbered lists](/help/bulleted-and-numbered-lists)
 * [Code blocks](/help/code-blocks)
 * [LaTeX](/help/latex)
+* [Spoilers](/help/spoilers)
 * [Create a poll](/help/create-a-poll)
 * [Start a video call](/help/start-a-call)
 
diff --git a/help/include/spoilers-examples.md b/help/include/spoilers-examples.md
new file mode 100644
index 0000000000..1092df792d
--- /dev/null
+++ b/help/include/spoilers-examples.md
@@ -0,0 +1,28 @@
+### What you type
+
+~~~
+
+```spoiler The spoiler heading might summarize what's inside
+This content is initially hidden.
+
+> You can combine spoilers with other formatting.
+
+```
+
+A message can contain both spoilers and other content.
+
+```spoiler
+Leave the heading blank if you like.
+```
+
+~~~
+
+### What it looks like
+
+Collapsed spoilers:
+
+![Spoiler collapsed](/static/images/help/spoiler-collapsed.png)
+
+Expanded spoilers:
+
+![Spoiler expanded](/static/images/help/spoiler-expanded.png)
diff --git a/help/include/spoilers-intro.md b/help/include/spoilers-intro.md
new file mode 100644
index 0000000000..348edfa0cc
--- /dev/null
+++ b/help/include/spoilers-intro.md
@@ -0,0 +1,3 @@
+Zulip lets you temporarily hide content in a collapsible **spoiler** section,
+with only the header initially shown. Clicking on the header reveals the hidden
+content.
diff --git a/help/spoilers.md b/help/spoilers.md
new file mode 100644
index 0000000000..916de32cd4
--- /dev/null
+++ b/help/spoilers.md
@@ -0,0 +1,13 @@
+# Spoilers
+
+{!spoilers-intro.md!}
+
+## Examples
+
+{!spoilers-examples.md!}
+
+## Related articles
+
+* [Message formatting](/help/format-your-message-using-markdown)
+* [Preview messages before sending](/help/preview-your-message-before-sending)
+* [Resize the compose box](/help/resize-the-compose-box)
diff --git a/static/images/help/spoiler-collapsed.png b/static/images/help/spoiler-collapsed.png
index 0de87b1b6d..a1ff5e5e39 100644
Binary files a/static/images/help/spoiler-collapsed.png and b/static/images/help/spoiler-collapsed.png differ
diff --git a/static/images/help/spoiler-expanded.png b/static/images/help/spoiler-expanded.png
index 91c446a487..0e9f72b9db 100644
Binary files a/static/images/help/spoiler-expanded.png and b/static/images/help/spoiler-expanded.png differ