Spoilers

When I write movie reviews, I generally assume people haven’t seen the movie yet and try to give away as little as possible of the plot. Way too many reviews give away major plot elements or make obvious hints about the movie (“the tragic ending”). Even if something is in the previews, I feel like the movie is better without knowing much going in. So I don’t include spoilers (well, sometimes with older movies because I feel like people already know), but that doesn’t mean I don’t want to discuss some aspect of a movie that ruined it for me. On the Blu-ray forum, they make it easy by letting you include a [spoiler] tag containing anything you want to hide behind a link that says “spoiler”. Some sites, will black out the spoiler text, which is kind of neat, but I like having the word there. I figured I could add a spoiler feature to my movie reviews, which are all in a Microsoft Access database that generates HTML for the whole site (should all be php, but that’s a big project). I could do the tags myself in the review, which I do for links, italics, and paragraphs, but it would be better to have a separate field for the spoiler that could be inserted into the review if there was a spoiler. I didn’t know how to actually make a spoiler appear and disappear and I wasn’t getting far on that, but adding a field to Access is easy. So I did that. Then I added that field to my form where I write the reviews.

Now I had to figure out how to code it. Hiding text involves CSS, so I knew I would need that, possibly just adding it to my stylesheet I already had and using a special tag for the hidden text. But CSS isn’t interactive, so I also needed some javascript to let the user change the status of the text to visible when the spoiler is clicked. So I put this function in the header, which is in one of the text files that Access inserts into the HTML of a review page:

<script>
  function toggledisplay(elementID)
    {
      (function(style) {
        style.display = style.display === 'none' ? '' : 'none';
    })(document.getElementById(elementID).style);
    }
</script>

Then within the review, I needed to add the word “spoilers” and call the function when it is clicked (the function is a toggle so it if the spoiler is not showing it will show it, but if it is showing already it will hide it):

<p><a href="javascript:toggledisplay('spoiler')">spoilers</a></p><div id="spoiler" style="display:none"><p>

</p></div>

It’s kind of a pain having Access code write code to a text file, so I created another text file with all of the first line above in it. If the spoilers field is used, it incorporates that text at the end of the review, otherwise it does nothing (the javascript in the header will be there regardless).

It didn’t quite work the first time I did it because I didn’t set the style initially to “display:none”. So you would see the spoiler and the clicking on “spoilers” would hide it (not what I was after). In the end it was pretty easy, but for some reason it took a while for me to get it working just right.

It works a little like this:

spoilers