Inline Spoiler Shortcode

// Hide text using the shortcode like this: [spoiler]hidden text here[/spoiler].

add_shortcode('spoiler', 'inline_spoiler_shortcode');

function inline_spoiler_shortcode($atts, $content = null) {

    // Start output buffering

    ob_start();

    // Output the spoiler content with the necessary styles

    ?>

    <span class="inline-spoiler" style="color: transparent;">

        <?php echo esc_html($content); ?>

    </span>

    <?php

    return ob_get_clean();

}

add_action('wp_footer', 'inline_spoiler_script');

function inline_spoiler_script() {

    ?>

    <style>

		.inline-spoiler {

			color: transparent;

			background-color: #333;

			border-radius: 4px;

			padding: 2px 4px;

			cursor: pointer;

			transition: color 0.3s ease;

		}

        .inline-spoiler:hover {

            background-color: #444;

        }

    </style>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function() {

            var spoilers = document.querySelectorAll('.inline-spoiler');

            spoilers.forEach(function(spoiler) {

                spoiler.addEventListener('click', function() {

                    this.style.color = this.style.color === 'transparent' ? '#fff' : 'transparent';

                });

            });

        });

    </script>

    <?php

}