CSSのdisplayプロパティを制御することで折りたたむ

最近のホームページで折りたたみ表示があるが、IDでやると個別に制御できるけど複数個所は面倒くさい。
なので、クラスで丸ごと折りたたみにする。

「非表示（初期）状態⇒表示状態」という流れでするなら以下の通り。

折り畳み表示する箇所.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="折り畳み表示する箇所.css">
        <script type="text/javascript" src="折り畳み表示制御.js"></script>
    </head>
    <body>
        <span onClick="openClose()">開閉ボタン</span>
        <span class="openHere">開閉するのはココ No.1</span>
        <span class="openHere">開閉するのはココ No.2</span>
    </body>
</html>

折り畳み表示する箇所.css

.openHere{
    display:none;
}

折り畳み表示制御.js

/**
* 折り畳み表示
* 'openHere'というクラスに属するオブジェクトをインライン要素or非表示に変更する。
*/
function openClose(){
    var obj = document.getElementsByClassName('openHere');
    for(var i=0;i<obj.length;i++){
        //非表示ならインライン要素に変更。表示状態なら非表示に変更。
        if(obj[i].style.display == "inline-block"){
            obj[i].style.display = "none";
        }
        else{
            obj[i].style.display = "inline-block";
        }
    }
}

複数の折り畳み箇所で表示/非表示が混在している場合は、初期表示を規定するクラスを分ける必要がある。

折り畳み表示のJavaScript

CSSのdisplayプロパティを制御することで折りたたむ