Simple Spoiler Tags (SMF 2.0.1)

[Kolya]

Implementing these spoilers involves adding the spoiler-tag, a spoiler-button in the editor and some CSS. The spoilers then work in 2 ways:

1. CSS (hide/unhide on mouse over with CSS3 fading)
2. Javascript onClick event (toggle spoiler to appear like normal text)

These functions work independently, so even when Javascript is disabled on the users system, the spoilers will still work. And they produce valid XHTML code. A demo can be seen here. As you can see these are inline spoilers that do not produce a box.

Now for the simple part, the installation instructions:

In ./Sources/Subs.php

Find

Code Select Expand


array(
'tag' => 'white',
'before' => '<span style="color: white;" class="bbc_color">',
'after' => '</span>',
),


Add below:         

Code Select Expand


array(
                'tag' => 'spoiler',
                'before' => '<span title="Click to toggle spoiler" class="spoiler" onclick="if (this.className==\'spoiler\') {this.className=\'spoiler_hover\'} else {this.className=\'spoiler\'}">',
                'after' => '</span>',           
),



Now add the button into the editor:

In ./Sources/Subs-Editor.php
Find

Code Select Expand


array(
'image' => 'hr',
'code' => 'hr',
'before' => '[hr]',
'description' => $txt['horizontal_rule']
),


Add below:

Code Select Expand


array(
'image' => 'spoiler',
'code' => 'spoiler',
'before' => '[spoiler]',
'after' => '[/spoiler]',
'description' => 'Spoiler text'
),


Finally add the CSS styles:

Code Select Expand


.spoiler { color:black; background:black; }
.spoiler:hover { color:white; background:black; }
.spoiler_hover { color:black; background:transparent; }
.spoiler,.spoiler:hover
{
-moz-transition: all 0.7s ease 0.3s;
-webkit-transition: all 0.7s ease 0.3s;
-o-transition: all 0.7s ease 0.3s;
transition: all 0.7s ease 0.3s;
}