Introduction



Ever wanted to have an attractive, animated, styled spoiler container for you and your users? Easy Spoiler is a free plugin to provide just that. It is quite simple, and works in pages, posts, comments, and widgets. Read on through this tutorial and if you have any questions or comments, feel free to post.

You can download the latest version here:
Easy Spoiler

And read the FAQ here:
Easy Spoiler FAQ.

And visit the dedicated forum here:
Easy Spoiler Forum.

Examples



You surround the content you wish to hide between the “spoiler” tag. Any content is allowed, including HTML, and other shortcodes. For a simple introduction, the following text


[spoiler] Your stuff here… [/spoiler]


would look like this:

Spoiler Inside



You operate the spoiler by clicking on the show/hide button. You can customize the spoiler with a hint as well as override the intro text:


[spoiler intro="Armor Help" title="Locations of armor vendors"] Your stuff here… [/spoiler]


Armor Help: Locations of armor vendors



The contents within a spoiler can be complex HTML and other shortcodes. Below is an example with our Easy Chart plugin embedded:


[spoiler intro="Answer" title="Flavor Sales"]
[easychart type="vertbar" height="300" width="350" groupnames="Chocolate, Vanilla, Strawberry, Mint, Peach" valuenames="1999, 2001, 2003, 2004, 2007, 2008" group1values="2069, 1184, 2389, 820, 2398, 701" group2values="2002, 1177, 2825, 697, 3226, 993" group3values="4071, 824, 505, 100, 230, 0" group4values="0, 163, 320, 145, 0, 121" group5values="0, 0, 143, 70, 565, 102"] [/spoiler]


becomes…


Answer: Flavor Sales



Now, don’t fret the crazy argument options. You can use the admin panel GUI to set up your defaults, and you can use the new buttons this plugin adds to your HTML editor to make adding spoilers a snap. More on that later though.


Spoiler Groups



You can cluster a group of spoilers together using the spoilergroup tag. This will create a visual cue to their relationship and auto-close one when another is opened. To use the spoilergroup tag, you simply sandwich your spoiler tags between it:

[spoilergroup]
[spoiler intro="Answers" title="Question 1"]in post 1[/spoiler]
[spoiler intro="Answers" title="Question 2"]in post 2[/spoiler]
[spoiler intro="Answers" title="Question 3"]e=mc^2[/spoiler]
[/spoilergroup]

will give you:


Answers: Question 1

Answers: Question 2

Answers: Question 3




Go ahead and play with opening them to get the idea.


Using the Spoiler Editor Buttons


Easy Spoiler adds two buttons to your HTML editor. You can turn off the buttons if you don’t like them (use the admin panel):

Toolbar Editor in Action

Here you see selected text, and the editor toolbar has two new buttons “spoiler” and “spoiler group”. By clicking on “spoiler”, the selected text will become a spoiler.

If there were several adjacent spoilers and we wanted the group feature, we would highlight the spoilers and click on “spoiler group”. Done! You can always edit the spoiler shortcode that was inserted to get specific. Keep in mind that if you always want a particular style or behavior, use the admin panel to tune the defaults to the way you want things to be.


Spoiler in-the-wild



For an example of the spoiler plugin on a production website, visit
5 Things you must do in Fallout 3

This article shows several dyerware plugins (easy spoiler, easy review, gallery and caption):
http://www.techulous.com/reviews/review-bioshock-2-part-1.html

Admin Preferences



Easy Spoiler now has an administration preferences panel under your wordpress settings area. Currently, there are two main sections on this page, “Parameter Defaults” and “Global Defaults”.

Easy Spoiler admin page

You can use the Parameter Defaults section to configure default values for the spoiler shortcode so you do not have to constantly provide your own customizations each time you specify a spoiler.

Also, you can use the Global Defaults to change some behaviors, such as turning the animations on or off, and assigning your own text for the Show and Hide buttons.

When making changes, do not forget to click on Save Changes! If you get a little lost, you can always click on Reset Settings which will reset the plugin to the way it was originally.

Usage



Now that we have seen it in action have some idea as to what you want to build with it, lets go over each parameter in detail. Anywhere (and even more than once) within a page or post you may enter the following to insert a spoiler:

[spoiler (optional parameters go here)] The Spoils [/spoiler]

While the spoiler innards can be on as many lines as you wish, It is very important that all of those optional parameters appear on the same line and are all lower case (the line can be very long, of course). The plugin has had an addition made to detect malformed arguments and abort processing. This helps you recognize a formatting problem. If you experience this, you will see the following text along with some help information on your post or page: “EASY SPOILER SHORTCODE ERROR”.

It is recommended that you enter these shortcodes in the raw HTML editor and not in a WYSIWIG one. This also avoids the unintentional insertion of HTML code that would otherwise malform your parameters and input text.

Ok, enough of that. Lets go over each easyspoiler parameter:

title (optional)
Example : “Location of the bad guy”
Description: Adds a title to the spoiler. The default is to have no title.

intro (optional)
Example : “Answer”
Description: Customize the text preceding the title. Default is “Spoiler Inside”.

tablecss (optional)
Example : “yourCSSName”
Description: Customize the spoiler container’s CSS Class.

And Wrapping Up…


Your thoughts are always welcome! Please post here any issues or suggestions.