Mecha CMS

Mecha CMS blog and documentation.

Spoiler Plugin

Updated: Sunday, 07 August 2016

An advanced spoiler plugin.

Unfortunately, I was unable to find the exact definition of the term “spoiler” on the Internet. This is strange, considering that many people use this term to express toggle–able panel that can be opened and closed by a button, which is usually placed in the post content to hide something special or too long to be shown up. Am I missing something?

Image

This plugin will do the same thing for you.

Download Latest Version

After you have installed this plugin, then you can apply these shortcodes in your post content:

Basic Usage

A simple spoiler with default settings.

{{spoiler}}
Content goes here…
{{/spoiler}}

Default Expanded

Add a expand attribute to make the spoiler expanded by default.

{{spoiler expand}}
Content goes here…
{{/spoiler}}

Custom Toggle Text

Add a toggle-text attribute to replace the default toggle text with your own toggle text.

{{spoiler toggle-text="Spoiler"}}
Content goes here…
{{/spoiler}}

Split the toggle text with a “ | ” to toggle the text between the opening and closing state of spoiler.

{{spoiler toggle-text="Open | Close"}}
Content goes here…
{{/spoiler}}

{{spoiler toggle-text="Foo | Bar | Close"}}
Content goes here…
{{/spoiler}}

Custom Toggle Placement

Do you want to put the toggle button before or after the panel?

{{spoiler toggle-placement="top"}}
Content goes here…
{{/spoiler}}

{{spoiler toggle-placement="bottom"}}
Content goes here…
{{/spoiler}}

Chameleon

Modifier classes are inspired by Twitter Bootstrap.

{{spoiler.default}}
Content goes here…
{{/spoiler}}

{{spoiler.primary}}
Content goes here…
{{/spoiler}}

{{spoiler.success}}
Content goes here…
{{/spoiler}}

{{spoiler.info}}
Content goes here…
{{/spoiler}}

{{spoiler.warning}}
Content goes here…
{{/spoiler}}

{{spoiler.danger}}
Content goes here…
{{/spoiler}}

New Species

Actually, you can freely insert your modifier custom class after the spoiler phrase.

{{spoiler.foo}} … {{/spoiler}}
{{spoiler.foo-bar-baz}} … {{/spoiler}}
.spoiler-foo {background-color:#AAA}
.spoiler-foo-bar-baz {background-color:#BBB}

Custom Classes and ID

Or you can apply the modifier classes and ID that are not bounded by the prefix .spoiler- and #spoiler: in the class and ID attribute(s).

{{spoiler class="custom-1" id="custom-1"}}
Content goes here…
{{/spoiler}}
.spoiler.custom-1 {color:#CCC}
#custom-1 {font-weight:bold}

Custom Attributes

Other attributes will be treated as normal HTML attributes.

{{spoiler style="color:red;" title="Click to toggle!"}}
Content goes here…
{{/spoiler}}

Accordion

Add a connect attribute to link the panel with another panels that are also have a connect attribute with the same value.

{{spoiler.success connect="A"}} … {{/spoiler}}
{{spoiler.success connect="A"}} … {{/spoiler}}
{{spoiler.success connect="A"}} … {{/spoiler}}

{{spoiler.danger connect="B" expand}} … {{/spoiler}}
{{spoiler.danger connect="B"}} … {{/spoiler}}
{{spoiler.danger connect="B"}} … {{/spoiler}}

Disabled

Do you want to lock the spoiler?

{{spoiler lock}}
Content goes here…
{{/spoiler}}

{{spoiler expand lock}}
Content goes here…
{{/spoiler}}
Donation and Email Subscription