Template:Spoiler: Difference between revisions

Latest revision as of 05:34, January 14, 2024

Purpose & Usage

This allows a title to be clicked like a spoiler to show expandedhidden content beneath the title.

Template parameters
Parameter		Description	Type	Status
margin	`margin`	Sets Bootstrap left margin for indentation. Suggested values `2` `3` `4` Default 0 Example Valid values are integers 1-5	Number	optional
shown	`shown`	The instruction title Example Descriptive title like: "Steps to Perform Clean Install"	String	required
hidden	`hidden`	Expanded content Example Assorted content (list, paragraph, etc.)	Content	required

Examples

Code:

{{Spoiler|shown=Instructions|hidden=Hidden content}}

Result:

➕ [Click to show]➖ [Click to hide] Instructions

Hidden content

Code:

{{Spoiler|margin=2|shown=Indenting|hidden=Use this optional parameter for indenting spoilers, because wikitext cannot be used as such.}}
{{Spoiler|margin=3|shown=Practical Indentation Values|hidden=This site uses Boostrap for consistency, so the only valid values are 1-5. The only practical values are 2, 3, or 4.}}
{{Spoiler|margin=4|shown=Default Value|hidden=The default value is 0 (no indentation) if this optional parameter is omitted.}}

Result:

➕ [Click to show]➖ [Click to hide] Indenting

Use this optional parameter for indenting spoilers, because wikitext cannot be used as such.

➕ [Click to show]➖ [Click to hide] Practical Indentation Values

This site uses Boostrap for consistency, so the only valid values are 1-5. The only practical values are 2, 3, or 4.

➕ [Click to show]➖ [Click to hide] Default Value

The default value is 0 (no indentation) if this optional parameter is omitted.

Code:

{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
#*You can nest different types of lists.
#*:It Just Works!}}

Result:

➕ [Click to show]➖ [Click to hide] Procedure

Beginning with a list now works.
- You can nest different types of lists.
  It Just Works!

Code:

{{Spoiler|shown=A Process|hidden= ===Include a heading===
Headings work on the first line with no extra things in front of it.}}

Result:

➕ [Click to show]➖ [Click to hide] A Process

Include a heading

Headings now work on the first line with no extra things in front of it.

Known Issues

Incompatible with CSS extension

@@ Line 1: / Line 1: @@
-<includeonly><div class="mw-collapsible mw-collapsed"><div class="mw-collapsible-toggle" style="float:none; cursor:pointer; color:#8DA9C0; display:inline-block;">{{{1}}}</div><div class="mw-collapsible-content">{{{2}}}</div></div></includeonly><noinclude>__NOTOC__
+<includeonly><!--
+--><div id="collapse-pre-one" class="mw-collapsible mw-collapsed spoiler ml-{{{margin|0}}}"><!--
+       SPOILER TOGGLE
+    --><div class="mw-collapsible-toggle"><span class="up small">&#10133; [Click to show]</span><span class="down small">&#10134; [Click to hide]</span> <span class=stepTitle>{{{shown|Spoiler heading}}}</span><!--
+       SPOILER CONTENT
+    --></div><div class="mw-collapsible-content spoiler-content p-2 pl-4"><!-- THIS IMPLICIT BREAK IS INTENDED! -->
+{{{hidden|Spoiler content}}}</div><!--
+--></div><!--
+--></includeonly><noinclude>__NOTOC__ [[Category:Instruction Templates]][[Category:Formatting Templates]][[Category:Layout Templates]][https://stepmodifications.org/forum/topic/5882-spoiler/ '''Forum Topic''']
 ==Purpose & Usage==
-This template allows text to be clicked like a spoiler to show hidden text immediately underneath it.
+<templatedata>
+{
+	"params": {
+		"margin": {
+			"description": "Sets Bootstrap left margin for indentation.",
+			"example": "Valid values are integers 1-5",
+			"type": "number",
+			"default": "0",
+            "suggestedvalues": ["2","3","4"],
+			"required": false
+		},
+		"shown": {
+			"description": "The instruction title",
+			"example": "Descriptive title like: \"Steps to Perform Clean Install\"",
+			"type": "string",
+			"required": true
+		},
+		"hidden": {
+			"description": "Expanded content",
+			"example": "Assorted content (list, paragraph, etc.)",
+			"type": "content",
+			"required": true
+		}
+	},
+	"description": "This allows a title to be clicked like a spoiler to show expandedhidden content beneath the title. "
+}
+</templatedata>
-===Parameters===
+==Examples==
-*''parameter 1'' is the text clicked to show the hidden content
+'''Code:'''
-*''parameter 2'' is the hidden content
+<pre>{{Spoiler|shown=Instructions|hidden=Hidden content}}</pre>
-*''parameter width'' is the width of the text to be clicked. This should be the amount necessary to fit the text on one line. Using the <code>ch</code> increment is easiest, as it is approximately the width of one character, although it is incompatible with older browsers (compatible with all up-to-date modern browsers).
+'''Result:'''
+{{Spoiler|shown=Instructions|hidden=Hidden content}}
+'''Code:'''
+<pre>{{Spoiler|margin=2|shown=Indenting|hidden=Use this optional parameter for indenting spoilers, because wikitext cannot be used as such.}}
+{{Spoiler|margin=3|shown=Practical Indentation Values|hidden=This site uses Boostrap for consistency, so the only valid values are 1-5. The only practical values are 2, 3, or 4.}}
+{{Spoiler|margin=4|shown=Default Value|hidden=The default value is 0 (no indentation) if this optional parameter is omitted.}}</pre>
+'''Result:'''
+{{Spoiler|margin=2|shown=Indenting|hidden=Use this optional parameter for indenting spoilers, because wikitext cannot be used as such.}}
+{{Spoiler|margin=3|shown=Practical Indentation Values|hidden=This site uses Boostrap for consistency, so the only valid values are 1-5. The only practical values are 2, 3, or 4.}}
+{{Spoiler|margin=4|shown=Default Value|hidden=The default value is 0 (no indentation) if this optional parameter is omitted.}}
-==Examples==
 '''Code:'''
-<pre>{{Spoiler|Click Me!|Where did this come from?}}</pre>
+<pre>{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
+#*You can nest different types of lists.
+#*:It Just Works!}}</pre>
 '''Result:'''
-{{Spoiler|Click Me!|Where did this come from?}}
+{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
+#*You can nest different types of lists.
+#*:It Just Works!}}
 '''Code:'''
-<pre>{{Spoiler|Click Me!|width=7ch|Where did this come from?}}</pre>
+<pre>{{Spoiler|shown=A Process|hidden= ===Include a heading===
+Headings work on the first line with no extra things in front of it.}}</pre>
 '''Result:'''
-{{Spoiler|Click Me!|width=7ch|Where did this come from?}}
+{{Spoiler|shown=A Process|hidden= ===Include a heading===
+Headings now work on the first line with no extra things in front of it.}}
 == Known Issues ==
-*Incompatible with CSS extension
+* Incompatible with CSS extension
-*The entire line for the text to click to reveal the text will be clickable instead of only the text. This can be alleviated by specifying the width with the width=<value> parameter, where <value> is the correct width for your phrase.
 == See Also ==
-No similar templates known.
+* [[:Template:CollapsibleTable]]
 </noinclude>