Looking through Robin’s style pack for spoiler tags – came up empty. A basic spoiler tag is as good as any, and not being a frequent user, it’s much further down the priority list. 🙂
I had an idea on how to hack something together via CSS. I could set up a style for a custom class for the default to be black text on a black background and then use the hover pseudo-class to change the font to normal and remove the background color. On the user side, you’d need to wrap the stuff you want to denote as a spoiler in a span tag and add the class to the class attribute
Wouldn’t be as nice as the collapsible box we’re used to but should do in a pinch
There’s quite a bit going with it, because obviously there has to be a button that triggers the event.
Here’s a recent thread where Milan has commented. There is still this fork of an early Tom Braider iteration, very old and now read-only. Tom Braider had the following code for WP 4.5:
`<?php
/*
Plugin Name: Tiny Spoiler
Plugin URI: http://www.tomsdimension.de/wp-plugins/tiny-spoiler
Description: [spoiler name=”top secret”]shows/hides this text[/spoiler]
Version: 0.2
Author: Tom Braider
Author URI: http://www.tomsdimension.de
*//**
* adds stylesheet
*/
function insert_spoiler_css()
{
echo “<style type=’text/css’>
.spoiler { border: 1px #000 dashed; }
.spoiler legend { padding-right: 5px; background: white; }
.spoiler legend input { width: 30px; }
.spoiler div { margin: 0px; overflow: hidden; height: 0; }
</style>\n”;
}
add_action(‘wp_head’, ‘insert_spoiler_css’);/**
* adds javascript
*/
function insert_spoiler_js()
{
echo <<<ENDJS
<script type=’text/javascript’>
function tiny_spoiler( id )
{
var s = document.getElementById( id ).style;
var divs = document.getElementsByTagName(‘div’);if ( s.height == ‘auto’ )
{
s.height = 0;
s.padding = 0;
document.getElementById( id + ‘_button’ ).value = ‘+’;
for ( var i = 0; i < divs.length; i++ )
{
if ( divs[i].parentNode.id == id )
divs[i].style.height = 0;
}}
else
{
s.height = ‘auto’;
s.padding = ’10px’;
document.getElementById( id + ‘_button’ ).value = ‘-‘;
for ( var i = 0; i < divs.length; i++ )
{
if ( divs[i].parentNode.id == id )
divs[i].style.height = ‘auto’;
}
}
}
</script>
ENDJS;
}add_action(‘wp_footer’, ‘insert_spoiler_js’);
/**
* creates spoiler code
*
* @param string $content spoiler content
* @param string $name title
* @return string spoiler code
*/
function replace_spoiler_tag( $content, $name )
{
$content = do_shortcode( $content );
$caracteres = array(‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’,’k’,’l’,’m’,’n’,’o’,’p’,’q’,’r’,’s’,’t’,’u’,’v’,’w’,’x’,’y’,’z’);
$addition = ”;
for ( $i = 0; $i < 10; $i++ )
$addition .= $caracteres[rand(0,25)];
$id = str_replace(‘ ‘, ”, $name).$addition;
$s = ‘<fieldset class=”spoiler”>
<legend>
<input type=”button” onclick=”tiny_spoiler(\”.$id.’\’)” id=”‘.$id.’_button” value=”+” />
‘.$name.’
</legend>
<div id=”‘.$id.'”>’
.$content.’
</div>
</fieldset>’;
return $s;
}/**
* parses parameters
*
* @param string $atts parameters
* @param string $content spoiler content
* @return unknown
*/
function spoiler_shortcode( $atts, $content )
{
extract(shortcode_atts(array(
‘name’ => ‘Spoiler’
), $atts));
return replace_spoiler_tag( $content, $name );
}
add_shortcode(‘spoiler’, ‘spoiler_shortcode’);
?>`
Do you think we could zhuzh it up a bit for good effect?
Just implemented a basic spoiler tag!
<span class="stearnvault-spoiler">This is a spoiler</span>
This is a spoiler
Hover over the black box with the cursor to reveal it. Will that work?
Pretty good, thanks!
Along with the black box you could have the text “hover to reveal” or similar – depends how long the text is of course. Any chance it could it be placed on the menu?
Will need to play with it some to see if I can get the note added. It’s not letting me change the background color in the ::after style block but that may be due to something else. Not sure if it’s something I can fix or not but I’ll try!
No idea how to add it to the menu but I’ll do some reading on it. We may need a plugin for customization like that, though.
Still looking into adding the note but I’ve confirmed that the spoiler works on mobile by tapping the hidden text. Also, it looks like a plugin is required to add options to the editor for some reason. Will look into that! Surprised it’s not part of WordPress as it’s kind of a basic feature
In the meantime, why not add it as a extra feature in the forum stickie? Seems like a good home, as it is for those coming to grief with special characters such as less_than ampersands greater_thans. 😛
And added!