In config Shorcode API plugin, add this lines:
Code: Select all
// Add Shortcode {Spoiler titre='Spoiler' content='Spoiler content'}
Shortcode::add('Spoiler', function($attributes) {
// Extract attributes
extract($attributes);
// text
if (isset($titre)) $titre = $titre; else $titre='Toggle content';
if (isset($content)) $content = $content; else $content = 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.';
// return
return '<style>.spoiler-box{padding:5px;border:1px dotted #ddd;margin-top:5px;margin-bottom:5px;}.spoiler-close{background-color:#ddd;padding:0px 5px;float:right;}.spoiler-content{width:100%;padding:5px;}.spoiler-title{background-color:#777;color:#fff;width:100%;display:block;padding:5px;position:relative;}.spoiler-close,.spoiler-content{display:none;}.spoiler-box:focus .spoiler-content{display:block;}.spoiler-box:focus .spoiler-close{display:block;}</style>
<div class="spoiler-box" tabindex="1"><div class="spoiler-title">' .$titre. '<div class="spoiler-close" tabindex="2">close</div></div><div class="spoiler-content">' .$content. '</div></div>';
});
In page or post call spoiler by this line:
Code: Select all
{Spoiler titre='Click to view...' content='The spoiler content'}