Andrew Kennedy

  • WP ShowHide

  • Languages: PHP, Javascript

  • Platform: Wordpress

  • Time: On Going

Hiding spoilers cannot be done easily in Wordpress.

Cue Wordpress Plugins.

The Wordpress plugins currently available either don't allow custom spoiler text or don't allow you to set the initial state of the spoiler content.

Cue Better WP ShowHide.

It looks something like this:

<a href="#" showhide="{myId}">
  ["{Show Text}", "{Hide Text}"]
</a>
<div id="{myId}">
  {Content goes here}
</div>

To configure everything, first replace {myId} with a custom name to identify that individual spoiler. You'll need to do this in both the showhide attribute of the a tag and in the id attribute of the div tag.

Then set what you'd like the text inside the link to be while it's visible by replacing {Show Text} with a custom value. Same goes for {Hide Text}.

After that you can optionally set the initial state of the spoiler. By default it will be hidden, but you can add the attribute showhide_visible="true" to the a tag for it to initially be visible.

Finally set the content you want to hide by replacing {Content goes here} with anything from a YouTube video to 29,467 pictures of cats.

<a href="#" showhide="ur-a-wizard-harry">
  ["I dare you to click this", "Haha, now you know:"]
</a>
<div id="ur-a-wizard-harry">
  Snape kills Dumbledore.
</div>

Here's a fully working example using the code just above this sentence:

["I dare you to click this", "Haha, now you know:"]

Snape kills Dumbledore.

Hopefully that helps!

If you feel like contributing to this small little project, feel free to submit a pull request. It could use some love.