【JavaScript】要素の表示/非表示を切り替える方法

ボタンで要素を出したり隠したりする「表示/非表示の切り替え」は、JavaScriptで頻出の処理です。方法はいくつかありますが、大事なのは「どれを使うか」より「隠したとき場所を残すかどうか」です。

この記事では、各手法の違いと使い分けを整理したうえで、スニペット（必要な部分だけ）の動くコードで解説します。

まず違いを理解する（場所が残るかどうか）

「非表示」と言っても、レイアウト上の場所が消えるか残るかで結果が変わります。ここを押さえると手法選びで迷いません。

classList.toggle で切り替える（基本・推奨）

もっとも素直な方法です。display:none を持つ .hidden クラスを用意し、classList.toggle() で付いていれば外す・無ければ付けるを1行で行います。

.hidden {
  display: none;
}

const btn = document.getElementById("toggle");
const box = document.getElementById("box");

btn.addEventListener("click", () => {
  box.classList.toggle("hidden"); // 付け外しを1行で
});

古い記事では if (classList.contains(...)) remove() else add() と書きがちですが、toggle() ならその分岐は不要です。classList の詳しい使い方はclassListの使い方を参照してください。

element.hidden で最短に切り替える

専用クラスすら用意せず、HTML標準の hidden 属性で切り替える方法です。el.hidden = true で display:none 相当になります。

btn.addEventListener("click", () => {
  box.hidden = !box.hidden; // true/false を反転するだけ
});

style.display を直接操作する（罠に注意）

インラインstyleの display を直接書き換える方法です。一見シンプルですが、判定に落とし穴があります。

btn.addEventListener("click", () => {
  if (box.style.display === "none") {
    box.style.display = "";   // 空文字でCSS既定の表示に戻す
  } else {
    box.style.display = "none";
  }
});

visibility で場所を残して隠す

隠してもレイアウトの場所を保ちたいとき（隣の要素をズラしたくないとき）は visibility を使います。display:none と違い、空白として領域が残ります。

.invisible {
  visibility: hidden;
}

box.classList.toggle("invisible");

jQueryなら toggle() 一発

すでにjQueryを使っているプロジェクトなら、toggle() 一行で切り替えられます（新規でこのためだけにjQueryを入れる必要はありません）。

$("#box").toggle();

アニメーション付きの表示切り替えなど、jQueryでの実装はボタンクリックで要素の表示・非表示を切り替える完全ガイドで詳しく解説しています。

アクセシビリティに配慮する（aria-expanded）

開閉ボタンには aria-expanded を付け、状態に合わせて更新すると、スクリーンリーダーにも開閉が正しく伝わります。要素自体は hidden 属性（または display:none）で隠すと、読み上げ対象からも外れます。

btn.addEventListener("click", () => {
  const willOpen = box.hidden;     // 今が非表示なら開く
  box.hidden = !willOpen;
  btn.setAttribute("aria-expanded", String(willOpen));
});

フェードで切り替えたいとき

display は基本的にアニメーションできません。ふわっと消すフェードをしたいときは、opacity と visibility をtransition で組み合わせます（透明にしてから場所を消す）。opacity / visibility の挙動は要素を点滅させる方法でも具体的に扱っています。

よくある質問（FAQ）

まとめ

要素の表示/非表示は、まず「場所を残すかどうか」で考えると手法が決まります。場所も消すなら display:none（classList.toggle か el.hidden で操作）、場所を残すなら visibility:hidden です。

実装は classList.toggle("hidden") か element.hidden が基本。style.display の直接操作は判定の罠があるため、確実さを求めるならクラス方式が無難です。開閉UIでは aria-expanded も忘れずに更新しましょう。