help: Add a dedicated page on how to format spoiler blocks.

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
+{!spoilers-intro.md!}
-the user interacts with it.
 
-
+{!spoilers-examples.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)
 
 ## Emoji and emoticons
 

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)
 

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)

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.

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)