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.

Nächster Beitrag: Gehäkelte Makeup-Entferner-Pads