Copyable code - Hidden elements

Folded text in HTML


<details><summary>Spoilers</summary>Spoiler</details>


summary {
  cursor:pointer; //unnecessary but looks good
}

Result: Spoilers

Spoiler

Hover Tooltip


.hiddentooltip:hover .tooltip {
  display:block;
}
.tooltip {
  display:none;
  position: absolute;
  font-size:13px;
  background-color: black;
  pointer-events: none;
}


<span class="hiddentooltip">
<a href="#">Hover</a>
<span class="tooltip">(Tooltip)</span>
</span>

Result: Hover(Tooltip)

(Simplified version of Vertpush's code.)

Spoiler button


.spoilerbutton {
  background-color: black;
  color: white;
  border:1px solid white;
  cursor: pointer;
}


<button class="spoilerbutton" type="button" onclick="document.getElementById('spoilers').style.display='block'">Show Spoiler</button>
<p id="spoilers" style="display:none">Spoilers</p>

Result:

Button that slides down


#wrapper {
  transition:height 1s ease-out;
  height:0;
  overflow:hidden;
}
#open {
  cursor: pointer;
  border-bottom: 1px solid white;
}


<div id="wrapper">
<p>Wheee</p>
</div>

<div id="open">Open</div>

<script>
document.getElementById("open").addEventListener("click", function () {
    document.getElementById("wrapper").style.height = "100px";
});
</script>

Wheee

Result: Click Me

(stackoverflow)