【JavaScript】要素の表示・非表示を切り替えるtoggle実装の基本

JavaScriptで要素の表示・非表示を切り替える方法は、メニューや説明文、FAQの回答欄など、さまざまな場面でよく使います。実装の基本はシンプルで、クリックなどの操作をきっかけにクラスを付け外しし、CSS側で表示状態を切り替えるのが定番です。

toggleで表示・非表示を切り替える基本

JavaScriptには、クラスの有無を切り替えるためのclassList.toggle()があります。これを使うと、要素に付いているクラスを「付ける」「外す」の両方を1行で書けます。表示・非表示の切り替えでは、たとえばis-hiddenのようなクラスを用意し、CSSで非表示状態を定義しておく方法が分かりやすいです。

<button id="toggleButton" type="button">表示/非表示を切り替える</button>

<div id="target" class="box">
  この要素が切り替わります。
</div>

<style>
  .box {
    padding: 16px;
    background: #f2f2f2;
    margin-top: 12px;
  }

  .is-hidden {
    display: none;
  }
</style>

<script>
  const button = document.getElementById('toggleButton');
  const target = document.getElementById('target');

  button.addEventListener('click', () => {
    target.classList.toggle('is-hidden');
  });
</script>

この例では、ボタンを押すたびにis-hiddenクラスが付いたり外れたりします。CSSのdisplay: none;によって、クラスが付いている間は要素が非表示になります。JavaScript側で直接style.displayを書き換える方法もありますが、見た目の管理をCSSに分けられるため、クラス操作のほうが扱いやすいです。

表示状態を見て文言も切り替える

実際のUIでは、表示・非表示だけでなくボタンの文言も変えたいことがあります。たとえば「開く」「閉じる」を切り替えると、ユーザーに状態が伝わりやすくなります。以下のように、クラスの状態を確認して文字列を書き換えると実用的です。

<button id="toggleButton2" type="button">開く</button>

<div id="target2" class="box is-hidden">
  詳細内容がここに入ります。
</div>

<script>
  const button2 = document.getElementById('toggleButton2');
  const target2 = document.getElementById('target2');

  button2.addEventListener('click', () => {
    const isHidden = target2.classList.toggle('is-hidden');
    button2.textContent = isHidden ? '開く' : '閉じる';
  });
</script>

classList.toggle()は、クラスを追加したか削除したかをtrueまたはfalseで返します。ここでは、その値を使ってボタンの文言を切り替えています。状態と表示をそろえておくと、操作中の混乱を減らせます。

styleを書き換える方法との違い

簡単な処理なら、JavaScriptでelement.style.display = 'none'のように直接指定することもできます。ただし、この方法は「今の表示状態」をJavaScript側で管理しなければならず、記述が増えやすいです。クラスを切り替える方法なら、見た目はCSS、動きはJavaScriptと役割分担できるので、後から調整しやすくなります。

// 直接styleを変更する例
const el = document.getElementById('target');

if (el.style.display === 'none') {
  el.style.display = 'block';
} else {
  el.style.display = 'none';
}

この書き方でも動きますが、初期値がCSSで設定されている場合は判定が分かりにくくなることがあります。初心者が表示・非表示を切り替える実装を覚えるなら、まずはclassList.toggle()を使う方法をおすすめします。

実装時に押さえておきたいポイント

• 非表示はdisplay: none;で制御するのが基本です。
• JavaScriptでは要素そのものを消すのではなく、クラスの付け外しで切り替えると管理しやすくなります。
• 複数の要素を切り替える場合は、querySelectorAll()でまとめて扱う方法もあります。
• アニメーションを付けたい場合は、displayだけでなくopacityやmax-heightを使う方法もあります。

表示・非表示の切り替えは、JavaScriptの中でも基本的で、いろいろな機能に応用しやすい実装です。まずはクラスを1つ切り替える形で理解し、必要に応じてボタン文言の変更やアニメーションを追加していくと、実用的なUIを作りやすくなります。