[Jquery]要素の表示・非表示を切り替える:classList.toggle

Jqueryを使用して要素の表示・非表示を切り替えるには、classList.toggleを利用する

ここではhiddenクラスを使用して、hiddenクラスをつけたり取ったりすることで表示・非表示を切り替えている

<script>
$('#btn').on('click', function (e) {
	var ele = document.getElementsByClassName('element');
	[].forEach.call(ele, function(elem) {
		elem.classList.toggle('hidden'); //hiddenクラスをつけたり削除したり
	})
});
</script>
<style type="text/css">
	.hidden{
		display:none;
	}
</style>
<button id="btn" type="button">表示切り替え</button>
<div class="element">
 中身
</div>
<div class="element">
 中身
</div>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です