25% off ProSNIPC25OFF

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