メニューなどの折りたたみ Toggle menu
メニューなど要素を折りたたんだり展開したりする方法のご紹介です。
デモ
サンプルコード
JavaScript
var fold = function(id) {
if (typeof(id) === 'object') {
for (var i = 0, len = id.length; i < len; i++) {
fe(id[i]);
}
} else {
fe(id);
}
};
var fe = function(id) {
var target = document.getElementById(id),
isNone = target.style.display === 'none';
target.style.display = isNone ? 'block' : 'none';
target.style.visibility = isNone ? 'visible' : 'hidden';
};
// 読み込み時に非表示にする
fold(['a01', 'a02']);
HTML
<a href="#" id="sample-fold1">Q1 サンプル</a>
<div id="a01">
A1 Q1の折りたたみサンプル
</div>
<a href="#" id="sample-fold2">Q2 サンプル</a>
<div id="a02">
A2 Q2の折りたたみサンプル
</div>
使い方
JavaScript
JavaScript
var sampleFold1 = document.getElementById('sample-fold1'),
sampleFold2 = document.getElementById('sample-fold2');
if (sampleFold1) {
sampleFold1.onclick = function(event) {
fold('a01');
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
};
}
if (sampleFold2) {
sampleFold2.onclick = function(event) {
fold('a02');
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
};
}
fold(['a01', 'a02']);