<p>The tension was high. 
  I was just about to quit when <span class="spoiler" data-text="the bad guy entered the room"></span>.  
  And then in the end <span class="spoiler" data-text="I was so happy the good guys won"></span>
.spoiler {
  color: blue;
}
class SpoilerAlert {
  constructor (el) {
    this.el = el;
    this.el.innerHTML = `Spoiler Alert <button>Click To Reveal</button>`;
    this.el.querySelector('button').addEventListener('click', this.reveal.bind(this));
    this.spoilerText = el.dataset.text;
  }
  
  reveal (ev) {
    this.el.textContent = this.spoilerText;
  }
}

const spoilerElements = Array.from(document.querySelectorAll('.spoiler'));

for (el of spoilerElements) {
  new SpoilerAlert(el);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js