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.

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:

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.

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.

Thanks for your answer. How can I surround the spoilers with a spoilergroup tag and what should be written in this tag? It would be very nice if this function would be added in a new version of the plugin.

thanks for the very fast update. The new function works fantastically in the site. You can look at it under the link.
Just the border at the bottom of the last wrap I can’t delete. I don’t found the right place in the css, but it’s not so bad.

[…] The ending of the comic where the shark burst out of the trashcan blew my mind! Just click the “SHOW” button to reveal the text. Until then, it’s hidden. Pretty nifty, huh? (And if you want to learn more tricks with this plugin, feel free to check out the tutorial created by the author.) […]

Hi, first of all thanks for published this great plugin. I have a question regarding to the plugin usage. I plan to use this plugin in a custom field. The value i will key in the custom field is something like.

I put above value in my custom field but it show exactly the same text on my site. I guess the plugin doesn’t has effect on value in custom field. How can i get it to work? I love to use this plugin but i have to use it in custom field. Thanks in advance.

Looks like you have lots of CSS rules that are overriding the plugin style. THat isn’t an extra row but an end-cap. I used safari and inspect-element (mozilla has better tools for this btw) to determine the culprit appears to be (div.post table td)

Sorry I don’t quite understand what you are asking. But let me try:
If you want to change the text at the top of each spoiler, specify the following within the opening spoiler tag:
intro=”intro text”
and
title=”title text”

Hi! I want to use this great plugin in a theme template. I need to include some static text under the spoiler in the single.php So, how can I do it? Is it possible to call it (probably with some options)?

Love the plugin. It’s exactly what i’ve been looking for. One question…..my site has it working fine but my “Show/Hide” buttons don’t look as good as the ones in these examples. Is there something I could do to get that same look that you have.

Also, when viewing the page with Google Chrome the first “Show/Hide” button looks different than the others. Any idea what could be causing this? Any help would be greatly appreciated.

Actually the first button is the correct one. Some theme-oriented snafu stopped the CSS rules for the remaining buttons (it is not chrome). I can’t look into it right at the moment, but if you shout back at me in a week Ill be able to look at it.

I need to update this and a few other plugins with better CSS controls.

Thanks so much. I’ll be checking back soon and hope to have it worked out. To be honest – they work fine as it is. I’m just hoping to make them look a little smoother, like the ones in your demos. You rock. Thanks

interesting plugin.
Will this plugin work with show/hiding portions of a table?
e.g. using spoilergroups as headers for each portion of table, with the user being able to hide or expand that section of table.
Thanks