Spoiler Script
Bei Mastodon (einer Microblogging Seite), aber auch in manchen Foren habe ich schon mal eine Spoiler- bzw. Inhaltswarnungs-Funktion gesehen. Das Prinzip ist einfach: Der eigentliche Text ist versteckt und wird erst sichtbar, wenn man auf einen Button drückt. Da ich etwas mehr Übung im JavaScript Programmieren gebrauchen kann, habe ich das hier mal als kleine Übung für mich umgesetzt.
Wenn du dieses Script gebrauchen kannst, kannst du es gern benutzen, kopieren, anpassen usw. :)
Beispiele
Spoiler: Star Wars
Dark Vader ist Lukes Vater!
Inhaltswarnung: Ein Kompliment
Du bist toll!
HTML
<div class="cn-head"> <strong>Inhaltswarnung:</strong> Ein Kompliment <p class="cn-body" class="hide"> Du bist toll! </p> </div>
CSS
.cn-head { border: solid 1px grey; padding: 0.2em 0.5em; cursor: pointer; margin: 1rem 0; } p.cn-body { padding: 0.2em 0; display: none; margin: 0; background-color: #dafbe3; } .cn-body.show { display:block; }
JavaScript
function contentNote(){ this.cnButton = document.querySelectorAll(".cn-head"); Array.prototype.forEach.call(this.cnButton, function(el){ el.addEventListener('click', function() { el.querySelector(".cn-body").classList.toggle('show') }); }); } contentNote();Kategorien: Tech | #coding
Schreib einen Kommentar
Kommentare werden moderiert und daher erst nach dem Freischalten sichtbar.