Template:Spoiler
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
This template requires the above stylesheet and script to work.
- CSS: Import Template:Spoiler/styles.css to your wiki. You may need to enable the TemplateStyles extension at Special:ManageWiki/extensions.
- 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!}}
|
This text is a spoiler!
|
{{spoiler|
I support multiple lines,
[[Main page|Links]],
[[File:De Alice's Abenteuer im Wunderland Carroll pic 15.jpg|thumb|200px|and images!]]
}}
|
I support multiple lines,  |
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}}!
|
I am an inline spoiler! |
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}}
|
Hover over me!
|
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}}
|
I am blurred!
|
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}}
|
I look like tvtropes spoilers!
|
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}}
|
This has "tvtropes", "blur" and "hover"!
|
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">
</syntaxhighlight>
Inline
To make this template inline by default, you can either:
- Remove the
#ifeqblocks at the start and end, and replace them withspan - Or replace "inline" with "block", and swap the positions of "span" and "div" for both
#ifeqblocks. 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.
For example,
this will still work.
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).
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Content | 1 | This is where the text to be spoilered goes
| 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.)
| 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)
| String | optional |