Spoiler Tag Demo

How It Works (Features)

This implementation creates a custom spoiler tag with the following behavior:

Text is initially covered by a black bar
Clicking or tapping reveals the hidden content
Revealed content is surrounded by a red box
Clicking again re-hides the content

Example Usage

Here's a spoiler about a plot twist in a famous movie: The main character in The Sixth Sense is actually dead the whole timespoiler 1.

Another example with multiple spoilers: In Star Wars: The Empire Strikes Back, Darth Vader reveals he is Luke's fatherspoiler 2 and Han Solo gets frozen in carbonitespoiler 3.

HTML Sample

<!-- How to use the spoiler tag -->

<p>
  This is a sentence with a <span class="spoiler">
    <span class="spoiler-content">secret text</span>
    <span class="spoiler-cover">spoiler</span>
  </span> inside.
</p>

<p>
  Another example: <span class="spoiler">
    <span class="spoiler-content">another secret</span>
    <span class="spoiler-cover">&nbsp; anything in here</span>
  </span>
</p>

CSS Required

/* Add this to your current CSS */

.spoiler {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 2px 0;
}

.spoiler-content {
    visibility: hidden;
    opacity: 0;
}

.spoiler-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

   /* The 'background-color' and 'color' */
   /* should also match your page's theme */

    background-color: #ccc; /* Must match the color value */
    color: #ccc;            /* same as background = invisible */

    transition: all 0.3s ease;
    border-radius: 3px;
    padding: 1px 4px;
    user-select: none;      /* Prevents text selection */
}

.spoiler.revealed .spoiler-cover {
    opacity: 0;
    visibility: hidden;
}

.spoiler.revealed .spoiler-content {
    visibility: visible;
    opacity: 1;
    padding: 1px 4px;
    border: 2px solid #ff0000;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

JavaScript Required

<script>
document.addEventListener('DOMContentLoaded', function() {
    const spoilers = document.querySelectorAll('.spoiler');
    
    spoilers.forEach(spoiler => {
        spoiler.addEventListener('click', function() {
            this.classList.toggle('revealed');
        });
    });
});
</script>

Browser Support

Works in all browsers from these years onward (based on specs)
(full support for the last 10+ years on all major platforms)

Chrome: Version 4+ (2010)
Firefox: Version 3.6+ (2010)
Safari: Version 5+ (2010)
Edge: All versions (12+ from 2015. Its first year.)
Opera: All Chromium-based versions (15+ from 2013)
iOS Safari: iOS 5+ (2011)
Android Browser: Android 4+ (2011)

Implementation Details

The spoiler effect is created using CSS and JavaScript:

The .spoiler class creates a container for the spoiler content
The .spoiler-cover is the black bar that hides the content
The .spoiler-content holds the hidden text
JavaScript toggles the .revealed class on click
JavaScript click events work for both mouse clicks and touch events
CSS transitions create the smooth reveal effect