How to add a spoiler without using shortcode-based plugins [closed]

There’s nothing wrong with shortcode-based plugin if it’s well made. To answer your question: there’s probably hundreds of ways but this is probably the easiest and most performant (similar to Reddit):

• If you need to add a spoiler, go to Text tab in post edit page
• Add <span class="spoiler"></span> around the text you want to hide
• Add following CSS rule: .spoiler { background: #000; }. Has to be the same as text color or read the alternative below.

---

Now you have two options:

---

1. Show on hover: Add the following CSS rule:

.spoiler:hover { 
    background: transparent; 
}

---

2. Show on click: Add the following function to theme’s .js file:

$('.spoiler').click( function() {

    this.addClass('show');
    // this.toggleClass('show'); <- if you want to toggle it for some reason
});

And the following CSS rule:

.spoiler.show { 
    background: transparent; 
}

If you want to show text “Spoiler” or something similar, you could use CSS :before or :after, position it and hide/show it accordingly using either :hover or class .show mentioned before.

---

Alternative color:

If you don’t like dark spoiler boxes, you could modify this a little bit and also change text color to whatever color you chose for background. That way you could choose whatever color you want.

---

References:

:before, :after