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";
		}
	}
}

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