Inline Spoiler / Reveal Block
Wraps text in a blurred, click-to-reveal spoiler block — use [scseed_spoiler label="Reveal answer"]...[/scseed_spoiler] anywhere in post content.
Module3 parts · by SnipCraft
PHPLogic
php
<?php
// Shortcode: [scseed_spoiler label="Reveal spoiler"]...content...[/scseed_spoiler]
add_shortcode( 'scseed_spoiler', 'scseed_spoiler_shortcode' );
function scseed_spoiler_shortcode( $atts, $content = '' ) {
$a = shortcode_atts( array(
'label' => __( 'Click to reveal', 'scseed' ),
), $atts );
$inner = do_shortcode( wp_kses_post( $content ?? '' ) );
return '<span class="scseed-spoiler" role="button" tabindex="0"'
. ' aria-label="' . esc_attr( $a['label'] ) . '"'
. ' title="' . esc_attr( $a['label'] ) . '">'
. '<span class="scseed-spoiler-inner">' . $inner . '</span>'
. '<span class="scseed-spoiler-hint" aria-hidden="true">'
. esc_html( $a['label'] ) . '</span>'
. '</span>';
}CSSStyles
css
.scseed-spoiler {
position: relative;
display: inline;
cursor: pointer;
border-radius: 3px;
transition: background 0.2s;
}
.scseed-spoiler-inner {
filter: blur(5px);
user-select: none;
pointer-events: none;
transition: filter 0.3s ease;
background: rgba(0,0,0,.08);
border-radius: 3px;
padding: 0 2px;
}
.scseed-spoiler-hint {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #555;
background: rgba(230,230,230,.6);
border-radius: 3px;
transition: opacity 0.25s;
pointer-events: none;
white-space: nowrap;
padding: 0 6px;
}
.scseed-spoiler.scseed-revealed .scseed-spoiler-inner {
filter: none;
user-select: auto;
background: transparent;
}
.scseed-spoiler.scseed-revealed .scseed-spoiler-hint { opacity: 0; pointer-events: none; }
.scseed-spoiler:focus { outline: 2px solid #7c5cff; outline-offset: 2px; }JavaScriptScript
js
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('click', function(e) {
var el = e.target.closest
? e.target.closest('.scseed-spoiler')
: null;
if ( ! el ) { return; }
if ( el.classList.contains('scseed-revealed') ) { return; }
el.classList.add('scseed-revealed');
el.setAttribute('aria-label', '');
el.removeAttribute('title');
el.setAttribute('tabindex', '-1');
});
document.addEventListener('keydown', function(e) {
if ( e.key !== 'Enter' && e.key !== ' ' ) { return; }
var el = document.activeElement;
if ( ! el || ! el.classList.contains('scseed-spoiler') ) { return; }
e.preventDefault();
el.classList.add('scseed-revealed');
});
});
}());#ux#content#shortcode#spoiler#reveal