readme.md

collapse.js - akouryy

クリックで展開/折り畳みするやつ。適当に作ったからバグってるかもしれない。

usage

折り畳みたい要素の前にクリックされる要素を置いて、全体をcollapseクラスの要素で囲む。

<div class="collapse"><span>ネタバレ</span><div>
    最終話で巨大なエネルギーを吸収したことによって、これらは不要となり返された。唯一、彼女は完全にそれに頼っていなかったため遅れた。
</div></div>

読み込み時に展開された状態で表示したい場合はdisplayスタイルを明示する。

<div class="collapse"><button>✨</button><div style="display: block">
    <img alt="💕" src="yoko.png"/>
    猪熊陽子かわいすぎか
</div></div>

comming soon

デフォルトではクリックされる要素の後に(click to open/close)と表示される。この表示を変更するには、data-collapse-info属性を設定する。

<div class="collapse"><span data-collapse-info="クリックでこころぴょんぴょん">1</span><div>
    <script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1397552685?w=490&h=307"></script>
    <noscript><a href="http://www.nicovideo.jp/watch/1397552685">【ニコニコ動画】ご注文はうさぎですか？　第1羽「ひと目で、尋常でないもふもふだと見抜いたよ」</a></noscript>
</div></div>

data-collapse-info属性に空文字列を設定することもできる。

license

ご自由にお使いください

collapse.js

document.addEventListener("DOMContentLoaded", function() {
    var style = document.createElement("style"), collapse = "collapse", none = "none";
    style.innerHTML = "." + collapse + ">:first-child::after{content:'(click to open/close)';font-size:80%}";
    document.head.appendChild(style);
    [].forEach.call(document.getElementsByClassName(collapse), function(elem) {
        var children = elem.children, cstyle;

        if(children.length == 2) {
            cstyle = children[1].style;
            children[0].style.cursor = "pointer";
            if(!cstyle.display) cstyle.display = none;

            children[0].addEventListener("click", function(){
                cstyle.display = cstyle.display != none ? none : "";
            });
        } else {
            console.error(collapse + ".js: invalid element:", elem);
        }
    });
});

collapse.min.js

document.addEventListener("DOMContentLoaded",function(){var s=document.createElement("style"),c="collapse",n="none";s.innerHTML="."+c+">:first-child::after{content:'(click to open/close)';font-size:80%}";document.head.appendChild(s);[].forEach.call(document.getElementsByClassName(c),function(e){var h=e.children,l;h.length==2?(l=h[1].style,h[0].style.cursor="pointer",l.display=l.display||n,h[0].addEventListener("click",function(){l.display=l.display!=n?n:""})):console.error(c+".js: invalid element",e)})})