Template:Spoiler: Difference between revisions

From Step Mods | Change The Game
No edit summary
mNo edit summary
 
(88 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<includeonly><div class="mw-collapsible mw-collapsed"><div class="mw-collapsible-toggle" style="float: none; cursor:pointer; color: #8DA9C0;">{{{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==
==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>


==Examples==
==Examples==
'''Code:'''
'''Code:'''
<pre>{{Spoiler|Click Me!|Where did this come from?}}</pre>
<pre>{{Spoiler|shown=Instructions|hidden=Hidden content}}</pre>


'''Result:'''
'''Result:'''
{{Spoiler|Click Mehis come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this his come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this !|Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?Where did this come from?}}
{{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.}}
 
'''Code:'''
<pre>{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
#*You can nest different types of lists.
#*:It Just Works!}}</pre>
 
'''Result:'''
{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
#*You can nest different types of lists.
#*:It Just Works!}}
 
'''Code:'''
<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|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


== See Also ==
== See Also ==
No similar templates known.
* [[:Template:CollapsibleTable]]


</noinclude>
</noinclude>

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

Forum Topic

Purpose & Usage

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

Template parameters

ParameterDescriptionTypeStatus
marginmargin

Sets Bootstrap left margin for indentation.

Suggested values
2 3 4
Default
0
Example
Valid values are integers 1-5
Numberoptional
shownshown

The instruction title

Example
Descriptive title like: "Steps to Perform Clean Install"
Stringrequired
hiddenhidden

Expanded content

Example
Assorted content (list, paragraph, etc.)
Contentrequired

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
  1. 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

See Also