[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>