Template:Spoiler: Difference between revisions

From Step Mods | Change The Game
No edit summary
mNo edit summary
 
(18 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<includeonly><div id="collapse-pre-one" class="mw-collapsible mw-collapsed" style="margin-bottom:1em;"><div class="mw-collapsible-toggle" style="float:none; cursor:pointer; color:#8DA9C0; display:{{#ifeq:{{{h2}}}|1|initial|inline-block}};"><span class="up">&#10133;</span><span class="down">&#10134;</span> {{{shown}}}</div><div class="mw-collapsible-content"><span>{{{hidden}}}</span></div></div></includeonly><noinclude>__NOTOC____NOTITLE__ [[Category:Layout Templates]]
<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>


===Parameters===
==Examples==
*''parameter shown'' is the text clicked to show the hidden content
'''Code:'''
*''parameter hidden'' is the hidden content
<pre>{{Spoiler|shown=Instructions|hidden=Hidden content}}</pre>
*''parameter h2'' if set to 1 will make the shown text have the initial display property (useful for the header 2 level, since it is underlined).
 
'''Result:'''
{{Spoiler|shown=Instructions|hidden=Hidden content}}


==Examples==
'''Code:'''
'''Code:'''
<pre>{{Spoiler|shown=Click Me!|hidden=Where did this come from?}}</pre>
<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:'''
'''Result:'''
{{Spoiler|shown=Click Me!|hidden=Where did this come from?}}
{{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:'''
'''Code:'''
<pre>{{Spoiler|shown=Click To Reveal Hidden List|hidden=some text, a <br>, or a &amp;nbsp;
<pre>{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
# Beginning with a list}}</pre>
#*You can nest different types of lists.
#*:It Just Works!}}</pre>


'''Result:'''
'''Result:'''
{{Spoiler|shown=Click To Reveal Hidden List|hidden=some text, a <nowiki><br></nowiki>, or a &amp;nbsp;
{{Spoiler|shown=Procedure|hidden=# Beginning with a list now works.
# Beginning with a list}}
#*You can nest different types of lists.
#*:It Just Works!}}


'''Code:'''
'''Code:'''
<pre>{{Spoiler|shown=Click To Reveal Hidden Heading|hidden=some text, a <br>, or a &amp;nbsp;
<pre>{{Spoiler|shown=A Process|hidden= ===Include a heading===
===Include a heading===
Headings work on the first line with no extra things in front of it.}}</pre>
some text, a <br>, a list, or a &amp;nbsp;}}</pre>


'''Result:'''
'''Result:'''
{{Spoiler|shown=Click To Reveal Hidden Heading|hidden=some text, a <nowiki><br></nowiki>, or a &amp;nbsp;
{{Spoiler|shown=A Process|hidden= ===Include a heading===
===Include a heading===
Headings now work on the first line with no extra things in front of it.}}
some text, a <nowiki><br></nowiki>, a list, or a &amp;nbsp;}}


== Known Issues ==
== Known Issues ==
* Wiki markup for lists will not be honored unless placeholder text is used at the beginning of the hidden text followed by a line break in the markup.
* Wiki markup for headings will not be honored unless placeholder text is used at the beginning of the hidden text and followed by a line break in the markup before the heading AND a line break in the markup after the heading followed by placeholder text.
* Incompatible with CSS extension
* 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[edit source]

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[edit source]

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[edit source]

  • Incompatible with CSS extension

See Also[edit source]