Javascript 簡易スポイラー

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

ソースコード

(function(){
    let sElem=document.getElementsByClassName("spoiler");
    for(let i=0;i<sElem.length;i++){
        let b=document.createElement("span");
        b.setAttribute("style","cursor:pointer;font-weight:bold;border:1px solid #aaa;padding:0 10px;margin:0 10px;border-radius:5px;user-select:none;background-color:#ddd;outline:0;");
        b.textContent="開く";
        b.addEventListener("click",e=>{
            sElem[i].classList.toggle("hidden");
            b.textContent=sElem[i].classList.contains("hidden")?"開く":"閉じる";
        });
        sElem[i].classList.add("hidden");
        sElem[i].parentNode.insertBefore(b,sElem[i]);
    }
})();

.hidden{
    display: none;
}

圧縮コード

!function(){let e=document.getElementsByClassName("spoiler");for(let t=0;t<e.length;t++){let n=document.createElement("span");n.setAttribute("style","cursor:pointer;font-weight:bold;border:1px solid #aaa;padding:0 10px;margin:0 10px;border-radius:5px;user-select:none;background-color:#ddd;outline:0;"),n.textContent="開く",n.addEventListener("click",d=>{e[t].classList.toggle("hidden"),n.textContent=e[t].classList.contains("hidden")?"開く":"閉じる"}),e[t].classList.add("hidden"),e[t].parentNode.insertBefore(n,e[t])}}();

.hidden{display:none}

使い方・サンプル

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

サンプルコード

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

実行結果

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