Javascript 簡易スポイラー

先日の記事で使用した簡易スポイラー(ネタバレ防止)のスクリプトです。

※2024/07/01 コード更新

ソースコード

(function(document) {
    let sElem = document.getElementsByClassName("spoiler");
    for (const item of sElem) {
        let b = document.createElement("button");
        b.textContent = "開く";
        b.addEventListener("click", e => {
            item.classList.toggle("hidden");
            b.textContent=item.classList.contains("hidden") ? "開く" : "閉じる";
        });
        item.classList.add("hidden");
        item.parentNode.insertBefore(b, item);
    }
})(window.document);

.hidden {
    display: none;
}

圧縮コード

!function(e){let t=e.getElementsByClassName("spoiler");for(const n of t){let t=e.createElement("span");t.textContent="開く",t.addEventListener("click",e=>{n.classList.toggle("hidden"),t.textContent=n.classList.contains("hidden")?"開く":"閉じる"}),n.classList.add("hidden"),n.parentNode.insertBefore(t,n)}}(window.document);

.hidden{display:none}

使い方・サンプル

スポイラー化したい要素のクラスにspoilerを追加します。

実行結果

div.spoiler {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

サンプルコード

<div class="spoiler">
<p>この文章はスポイラーの中に表示されます。</p>
<p>このサンプルを含む本ブログでは、spoilerクラスに以下のスタイルを適用させていました。</p>
<pre><code>div.spoiler {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}</code></pre>
</div>