Template:Spoiler

File:Test Template Info-Icon - Version (2).svg Template documentation[view] [edit] [history] [purge]

{{#ifeq:spoiler |doc

    | 

{{#ifeq:show |show

         | Template:Mbox
        }}{{#if: |
         |   {{#ifexist:Template:Spoiler
                  | [[Category:{{#switch:Template |Template=Template |Module=Module |User=User |#default=Wikipedia}} documentation pages]]
                  | 
                 }}
        }}
    | 
   }}

A general-purpose template, used to obscure any content that may be considered a spoiler. Text, images and links are hidden and are revealed when clicked, and optionally can be revealed when hovered over.

This template's behavior is inspired by the spoilers on tvtropes, with reference to the css of Template:Spoil on Astroneer Wiki and Minecraft Japan Wiki.

This template also supports a "show/hide all spoilers" button, refer to #Show/Hide all spoilers button.

Dependencies

File:Mediawiki logo flat 2020.svg

This template uses the extension: TemplateStyles
For this template to work properly you may need to enable this extension at Special:ManageWiki/extensions#mw-section-parserhooks.

{{#if:| |{{#ifexist:Category:Templates using TemplateStyles|}}}}

This template requires the above stylesheet and script to work.

• CSS: Import Template:Spoiler/styles.css to your wiki.
• JS: Copy the contents of Template:Spoiler/spoiler.js to MediaWiki:Common.js on your wiki.

If your wiki uses the MobileFrontend extension, common.js will not be automatically loaded on mobile so you will have to copy the script to mobile.js as well.

Usage

Default behavior is for spoiler text to be revealed on click. However, because this page cannot load the required script, they are revealed on hover on this page.

{{spoiler|<contents>|<inline>|<extra customization>}}

Basic usage

What you type	Result
{{spoiler|This text is a spoiler!}}	inline|span|div}} class="spoiler hover">This text is a spoiler!</{{#ifeq:|inline|span|div}}>
{{spoiler| I support multiple lines, [[Main page|Links]], [[File:De Alice's Abenteuer im Wunderland Carroll pic 15.jpg|thumb|200px|and images!]] }}	inline|span|div}} class="spoiler hover "> I support multiple lines, Links, File:De Alice's Abenteuer im Wunderland Carroll pic 15.jpg and images! </{{#ifeq:|inline|span|div}}>

Inline spoilers

By default, the spoiler block that this template creates is a <div> element, which puts it in a separate line from the text before and after it. If an inline spoiler is desired, putting "inline" at position 2 will make it a <span> element.

What you type	Result
I am {{spoiler|an inline spoiler|inline}}!	inline|span|div}} class="spoiler hover">an inline spoiler</{{#ifeq:inline|inline|span|div}}>!

Additional customizations

For spoilers to be revealed on hover (in addition to on click), add "hover" at position 3. (Position 2 can be left empty if unnecessary.)

What you type	Result
{{spoiler|Hover over me!||hover}}	inline|span|div}} class="spoiler hover">Hover over me!</{{#ifeq:|inline|span|div}}>

By default, spoilers are covered with a grey block (this color can be changed in the css if desired). Spoilers can be obfuscated by a blur instead by adding "blur" at position 3.

What you type	Result
{{spoiler|I am blurred!||blur}}	inline|span|div}} class="spoiler blur hover">I am blurred!</{{#ifeq:|inline|span|div}}>

The spoiler can also look exactly like they do on tvtropes (light grey with dotted underline), by adding "tvtropes" at position 3. This works fine for white/light colored backgrounds, but may need to be tweaked on darker backgrounds.

What you type	Result
{{spoiler|I look like tvtropes spoilers!||tvtropes}}	inline|span|div}} class="spoiler tvtropes hover">I look like tvtropes spoilers!</{{#ifeq:|inline|span|div}}>

Any of the customizations at position 3 can be combined, in any order, with a space separating the words (although combining all 3 words looks weird). "hover" at position 3 has been used for every example on this page!

What you type	Result
{{spoiler|This has "tvtropes", "blur" and "hover"!||tvtropes blur hover}}	inline|span|div}} class="spoiler tvtropes blur hover">This has "tvtropes", "blur" and "hover"!</{{#ifeq:|inline|span|div}}>

Show/Hide all spoilers button

A "show/hide all spoilers" button can be placed anywhere on the page and does what it says. Showing and hiding spoilers with this button preserves the spoilers you have previously manually revealed. (i.e. If you click to reveal a spoiler, then click "show all spoilers", then "hide all spoilers", the spoilers you revealed at first will stay revealed.)

Adding id="spoilerbtn" to any element will turn it into the "show/hide" button.

What you type	Result
<div id="spoilerbtn"></div>	Show all spoilers
Note: This element being empty is intentional! The javascript handles putting the "show all spoilers"/"hide all spoilers" text. If any text is in this element, it will be overwritten when the javascript loads anyway. As such, it is possible to put error text there, that only shows when the javascript doesn't load, like this: <div id="spoilerbtn">If you're seeing this text, the javascript isn't loaded.</div>	This button does nothing on this page as the required javascript cannot be loaded. This is what the "hide all spoilers" button looks like, for reference: Hide all spoilers

All these colors can be changed with css.

Changing default behavior

This is the source code for this template: <syntaxhighlight lang="wikitext"> <{{#ifeq:|inline|span|div}} class="spoiler "></{{#ifeq:|inline|span|div}}> </syntaxhighlight>

Inline

To make this template inline by default, you can either:

1. Remove the #ifeq blocks at the start and end, and replace them with span
2. Or replace "inline" with "block", and swap the positions of "span" and "div" for both #ifeq blocks. This will make it so position 2 looks for "block" instead of "inline", and the template is inline by default.

Note that the inline version of this template won't work properly for images or if there's

multiple lines

like this

However, using <br> for line breaks still works.

For example,<br>this will still work.

<{{#ifeq:inline|inline|span|div}} class="spoiler hover">For example,
this will still work.</{{#ifeq:inline|inline|span|div}}>

Customizations

To make this template blurred, hoverable or look like tvtropes spoilers by default, add "blur", "hover" and/or "tvtropes" to the class, with spaces between the words.

For example, this will make it blurred and hoverable by default:

class="spoiler blur hover {{{3|}}}"

TemplateData

This template is used to obscure text that may be a spoiler, which can be revealed on click (or optionally on hover).

Template parameters[Edit template data]

Parameter		Description	Type	Status
Content	1	This is where the text to be spoilered goes Example I am a spoiler!	String	required
Inline	2	Insert "inline" (lowercase) here to make it inline. (By default, this template will be on a separate line from the text before and after it.) Suggested values inline	String	optional
Extras	3	"blur" to make it blurred instead of the color block. "tvtropes" to make it look like tvtropes spoilers. "hover" to make it show on hover. These can be combined, with space between. (i.e. "blur hover") (all lowercase) Suggested values blur tvtropes hover	String	optional

The above documentation is transcluded from Template:Spoiler/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.