How to Build Spoiler Protection in your HTML

June 28, 2014

There’s a little-used trick web masters can use to hide crucial spoiler information from your web viewers. When you want to hide something like the ending of a movie, the answer to a riddle, etc., you can use a little-known HTML trick called the spoiler. Here’s how it works:

  1. First use CSS to make a formatting class for your spoiler content, and put it in your main CSS..spoiler { background-color: black; color: black;}.spoiler:hover{ background-color: #E9E9DF;}

  2. Next, place your content inside a span tag that refers to the class you created.# Change the "[ ]" brackets to "< >" brackets in the real code[span class="spoiler"]Your content here...[/span]

Now when people come to your site they won’t accidently read what they might not want to. You can give them the option by warning them. There are a couple of other ways to do this as well, but this is a very basic implementation that works.

Example

[**Spoiler Below: Roll over the black text to see the spoiler…]The guy who’s been with the hero all along kills him at the end…

The bad news is that it doesn’t work in IE. I’ll get that fixed and update the page. Enjoy.:

Related posts: