Add The Spoiler Button

[HotRod Richard]

If you have a long code or message that you wish to hide in your post until someone clicks the Spoiler (this keeps your post shorter, for example the long code I put in the Make First Post Sticky thread)

You will need to use the BBCode in your post editor and use these tags:

(check the bottom of this post for the easy way)

[spoiler] at the beginning, then [/spoiler] at the end of your hidden text

Keep in mind the spoiler will not show in preview mode, it will only show after you post your thread, message, or reply

When I first used this feature it showed in the post as SPOILER: Click to show which I had seen a button used in support so I pursued the code to make it show as a button here too. 

The Spoiler Button feature is enabled in this Group,

And if you have a group that you would like the button to show like this:

SPOILER: Click to show

.spoiler_header > a { color: @buttons_text_color; font: @buttons_text_font; background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; border: @buttons_border; .rounded-corners(@buttons_border_radius); min-height: 20px; line-height: 20px !important; padding: 2px 4px; display: inline-block; vertical-align: middle; cursor: pointer; white-space: nowrap; }
.spoiler_header > a:hover { color: @buttons_hover_text_color; font: @buttons_text_font; text-decoration: @buttons_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }

Admin > Themes > Advanced Styles & CSS > then click the "Style Sheet" tab and enter the code below here, or above in the spoiler, at the bottom of your Style Sheet and click "Save Theme"

.spoiler_header > a { color: @buttons_text_color; font: @buttons_text_font; background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; border: @buttons_border; .rounded-corners(@buttons_border_radius); min-height: 20px; line-height: 20px !important; padding: 2px 4px; display: inline-block; vertical-align: middle; cursor: pointer; white-space: nowrap; }
.spoiler_header > a:hover { color: @buttons_hover_text_color; font: @buttons_text_font; text-decoration: @buttons_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }

The easy way to use the spoiler feature in this group. Since I've been experimenting with this spoiler I have learned something easier, click the spoiler below:

SPOILER: Click to show

I have found that even while in the preview mode, or as you are leaving a reply to a post or creating a new thread, I put the spoiler tag at the beginning and the closing spoiler tag at the end as I typed this message. After I clicked to Save Changes, the text I typed here, went into a spoiler without having to use the BBCode editor, I was in the normal preview mode... That will make it easier for some to use the spoiler feature...

Thanks for viewing, and I hope this is helpful to you