メニューなどの折りたたみ Toggle menu

メニューなど要素を折りたたんだり展開したりする方法のご紹介です。

デモ

Q1 サンプル

A1 Q1の折りたたみサンプル

Q2 サンプル

A2 Q2の折りたたみサンプル

サンプルコード

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']);

JavaScript逆引きリファレンス一覧へ戻る