折り畳み表示のJavaScript
折り畳み表示のJavaScript:
最近のホームページで折りたたみ表示があるが、IDでやると個別に制御できるけど複数個所は面倒くさい。
なので、クラスで丸ごと折りたたみにする。
「非表示（初期）状態⇒表示状態」という流れでするなら以下の通り。
複数の折り畳み箇所で表示/非表示が混在している場合は、初期表示を規定するクラスを分ける必要がある。
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";
}
}
}
コメント
コメントを投稿