Index » Extras » Code » Hidden
Updated 3/28/23

Copyable code - Hidden elements

Folded text in HTML

<details><summary>Spoilers</summary>Spoiler</details> summary { cursor:pointer; //unnecessary but looks good }
Result: SpoilersSpoiler

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>


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>


Result: Click Me