要素の表示・非表示（CSSクラス） — el.classList.toggle('is-hidden')
クラスを切り替えて見た目を制御するのが一番安全で保守しやすい方法です。classList.toggle('is-hidden') は、そのクラスが「付いていれば外す／なければ付ける」を1回で行います。
基本の使い方
<button id="toggle">表示/非表示</button>
<div id="panel" class="panel">コンテンツ</div>
<style>
.panel { display: grid; gap: 8px; } /* 本来の表示方法 */
.is-hidden { display: none; } /* 非表示にするクラス */
</style>
<script>
const btn = document.getElementById("toggle");
const panel = document.getElementById("panel");
btn.addEventListener("click", () => {
panel.classList.toggle("is-hidden"); // 付け外しでON/OFF
});
</script>
- 役割: CSS側に「非表示の定義」を置き、JSはクラスを切り替えるだけ。
- 利点: 元のレイアウト（grid, flex など）を壊さず、再利用しやすい。
2引数版 toggle（条件で明示的に制御）
// 条件が真なら付ける、偽なら外す
el.classList.toggle("is-hidden", shouldHide);
- 例: 入力が空なら隠す、文字が入れば見せる。
input.addEventListener("input", () => {
const empty = input.value.trim() === "";
hint.classList.toggle("is-hidden", empty);
});
よく使うテンプレート集
ラベル: ボタンで開閉（初期状態をCSSで決める）
<style>
.panel { display: flex; }
.is-hidden { display: none; }
</style>
<script>
openBtn.addEventListener("click", () => panel.classList.remove("is-hidden"));
closeBtn.addEventListener("click", () => panel.classList.add("is-hidden"));
</script>
ラベル: リストの項目を絞り込み
function filter(keyword) {
document.querySelectorAll(".item").forEach(el => {
const hit = el.textContent.toLowerCase().includes(keyword.toLowerCase());
el.classList.toggle("is-hidden", !hit);
});
}
ラベル: アイコン切り替え（表示と非表示を別クラスで）
.icon { display: inline-block; }
.is-hidden { display: none; }
playBtn.addEventListener("click", () => {
playIcon.classList.add("is-hidden");
pauseIcon.classList.remove("is-hidden");
});
実務でのコツ
- 意味のあるクラス名: 見た目の説明よりも状態名（is-hidden, is-active, has-error）にすると設計が明快。
- レイアウトはCSSに任せる: 本来の表示形式は
.panel { display: flex/grid }に書き、非表示は.is-hidden { display: none }にする。JSはクラス操作のみ。 - アクセシビリティ: 完全に隠すときは
aria-hidden="true"も付けると支援技術に伝わりやすい。付け外しはクラス切り替えと同時に行う。
const hidden = panel.classList.toggle("is-hidden");
panel.setAttribute("aria-hidden", hidden ? "true" : "false");
- 演出が必要なら別クラス: フェードやスライドは
opacity/transformのクラスを用意し、表示制御と演出クラスを併用。
ありがちなハマりポイントと対策
- 再表示で display が崩れる:
- 対策: 本来の表示はベースクラスで定義。JSで
displayを直接書かない。
- 対策: 本来の表示はベースクラスで定義。JSで
- トグル初期ズレ（初期が非表示）:
- 対策: 初期状態はCSSで
.is-hiddenを付けておく。JSの最初のトグルで意図通りになる。
- 対策: 初期状態はCSSで
- ネスト要素の判定ミス:
- 対策: クリック委譲＋
closest()で正しい対象にクラスを付け外し。
- 対策: クリック委譲＋
練習問題（手を動かして覚える）
<input id="q" placeholder="検索">
<ul id="list">
<li class="item">Apple</li>
<li class="item">Banana</li>
<li class="item">Cherry</li>
</ul>
<button id="toggle-all">全て表示/非表示</button>
<style>
.is-hidden { display: none; }
</style>
<script>
const q = document.getElementById("q");
const list = document.getElementById("list");
// 1) 入力で絞り込み（ヒットしないものを隠す）
q.addEventListener("input", () => {
const k = q.value.trim().toLowerCase();
list.querySelectorAll(".item").forEach(li => {
const hit = li.textContent.toLowerCase().includes(k);
li.classList.toggle("is-hidden", !hit);
});
});
// 2) 全ての項目の表示/非表示をトグル
document.getElementById("toggle-all").addEventListener("click", () => {
const items = list.querySelectorAll(".item");
const anyVisible = Array.from(items).some(li => !li.classList.contains("is-hidden"));
items.forEach(li => li.classList.toggle("is-hidden", anyVisible));
});
</script>
直感的な指針
- 表示/非表示は「CSSクラス」で管理、JSは classList を切り替えるだけ。
- 2引数 toggle で条件に応じた明示制御を。
- 演出・アクセシビリティもクラスと属性で合わせて整える。