Many forums or blogs make use of the spoiler tag: a little button or anchor that, if clicked, reveals otherwise invisible content.
I wanted to add this functionality to the site for Tables of Content, so I figured adding this guide here could be useful both for my own future reference and for anyone else looking for a concise explanation.
Here’s an example of what I mean by spoiler tag.
Surprise!
Edit: it turns out there is a ‘new’ HTML tag I didn’t know abut that can handle this automatically in the browser, without requiring JS or special CSS. It’s called Details element and it works like a spoiler tag too.
Example details + summary syntax.
<details>
<summary>Click to show</summary>
<p>Surprise!!</p>
</details>
This syntax will result in the following element.
Surprise!!
Ignoring the HTML element, what we could do to implement a spoiler tag (what this post was about before I learned about this HTML syntax) is divided in three parts.
.spoiler-content {
display: none;
}
With the display property set to none, we make content invisible (but still part of the page’s HTML). Setting this to block would make it visible again.
<a href="#" onclick="toggleSpoiler(event, '1')">Table of Contents</a>
<div class="spoiler-content" id='1'>
<!-- Your invisible content here.> </!-->
</div>
Pretty straightforward: the div has the spoiler-content class that makes it invisible by default, and a unique id. We pair that content with that anchor by sending the same id as the second argument to the toggleSpoiler function.
function toggleSpoiler(event, id) {
event.preventDefault();
var spoilerContent = document.getElementById(id);
if (spoilerContent.style.display === 'none' || spoilerContent.style.display === '') {
spoilerContent.style.display = 'block';
} else {
spoilerContent.style.display = 'none';
}
}
For the script, we define toggleSpoiler such that, given an id, if the element with that id is visible it becomes hidden, or viceversa. I add the check for display === '' as for some reason in this toy example, js was detecting the value as ‘’ the first time even if the class was correctly applied, so that you don’t need to click twice to reveal the content.
And there you have it, a simple spoiler tag in plain HTML/JS. Note that you could make the anchor a button or any other thing instead, and make the div contain any arbitrary HTML elements.