Show/Hide

by Simon Hi

HTML

<div>
  {TEXT1}
</div>
<div class="spoilerBox" style="display:none">
  {SPOILER1}
</div>
<div>
  {TEXT2}
</div>
<div class="spoilerBox" style="display:none">
  {SPOILER2}
</div>

CSS

div.spoilerBox {
  border: 1px inset;
  padding: 6px;
}

div.spoilerBox input {
  display: block;
}

JavaScript

(function() {
  function showHide(ev) {
    var btn = ev.target;
    var div = btn.nextSibling;
    if (div.style.display == 'none') {
      div.style.display = 'block';
      btn.value = "Cacher spoiler";
    } else {
      div.style.display = 'none';
      btn.value = "Afficher spoiler";
    }
  }

  function hide(ev) {
    ev.target.parentNode.style.display = 'none';
    ev.target.parentNode.previousSibling.value = "Afficher spoiler";
  }

  var k, list, btn, p;
  list = document.getElementsByClassName("spoilerBox");
  for (k = 0; k < list.length; k++) {
    btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Cacher spoiler";
    btn.addEventListener("click", hide, false);
    list[k].appendChild(btn);
    p = list[k].parentNode;
    btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Afficher spoiler";
    btn.addEventListener("click", showHide, false);
    p.insertBefore(btn, list[k]);
  }
})();