Spoiler Script

Von Julia von 17.05.2020, zuletzt geändert am 3.10.2020

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

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();