【jQuery】ボタンクリックで要素の表示・非表示を切り替える完全ガイド｜toggle・アニメーション・クラス・アクセシビリティまで

jQueryでボタンクリック時に要素を表示・非表示にするには複数の方法があります。シンプルな toggle() から、スライド・フェードアニメーション付き、CSSクラスで制御する方法、アクセシビリティ対応まで用途に合った実装パターンを体系的に解説します。

toggle()で表示・非表示を切り替える（最もシンプル）

toggle() は要素が表示中なら非表示に、非表示なら表示に自動的に切り替えます。最もシンプルな実装です。

<button id="toggle-btn">詳細を表示/非表示</button>
<div id="detail-box">
  <p>ここに詳細コンテンツが入ります。</p>
</div>

$(function () {
  $('#toggle-btn').on('click', function () {
    $('#detail-box').toggle();
  });
});

show() / hide()で表示状態を明示的に制御する

表示と非表示を別々のボタンで制御したい場合や、条件分岐で「必ず表示する」「必ず非表示にする」を明示したい場合に使います。

$(function () {
  // 表示・非表示を条件で切り替える
  $('#show-btn').on('click', function () {
    $('#panel').show();
  });
  $('#hide-btn').on('click', function () {
    $('#panel').hide();
  });

  // is(':visible')で現在の状態を確認してから制御
  $('#toggle-btn').on('click', function () {
    var $panel = $('#panel');
    if ($panel.is(':visible')) {
      $panel.hide();
    } else {
      $panel.show();
    }
  });
});

slideToggle() / fadeToggle()でアニメーション付き切り替え

突然表示・非表示が切り替わると視覚的に違和感があります。アニメーションを加えることでUXが大幅に向上します。

slideToggle()：上下にスライドしながら切り替える

$(function () {
  $('#slide-btn').on('click', function () {
    $('#slide-panel').slideToggle(300);  // 300ms でスライド
  });
});

fadeToggle()：フェードイン/フェードアウトで切り替える

$(function () {
  $('#fade-btn').on('click', function () {
    $('#fade-panel').fadeToggle(400);  // 400ms でフェード
  });
});

連打対策：stop()でアニメーションキューをクリアする

$(function () {
  $('#slide-btn').on('click', function () {
    // stop(true, true): 前のアニメーションをキャンセルして即完了させる
    $('#slide-panel').stop(true, true).slideToggle(300);
  });
});

CSSクラスで表示・非表示を管理する

CSSのトランジションを活用したい場合や、パフォーマンスを重視する場合はjQueryでクラスを付与・削除してCSSで表示制御する方法が効果的です。

.panel {
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.panel.is-hidden {
  max-height: 0;
  opacity: 0;
}

$(function () {
  // 初期状態を非表示にしたい場合はHTMLにis-hiddenクラスを付けておく
  $('#class-btn').on('click', function () {
    $('#class-panel').toggleClass('is-hidden');
  });
});

ボタンのテキストを「表示」↔「非表示」と連動させる

ボタンのラベルを表示状態に合わせて変えることで、ユーザーが次のアクションを直感的に理解できます。

$(function () {
  $('#toggle-btn').on('click', function () {
    var $panel = $('#panel');
    var $btn   = $(this);

    $panel.slideToggle(300, function () {
      // アニメーション完了後にボタンテキストを切り替え
      if ($panel.is(':visible')) {
        $btn.text('▲ 閉じる');
      } else {
        $btn.text('▼ 詳細を見る');
      }
    });
  });
});

複数要素の一括切り替えと排他制御（タブ風切り替え）

複数のパネルがあり、1つを開くと他が閉じる「排他切り替え（アコーディオン風）」のパターンです。

<div class="toggle-group">
  <button class="group-btn" data-target="#panel-a">パネルA</button>
  <button class="group-btn" data-target="#panel-b">パネルB</button>
  <button class="group-btn" data-target="#panel-c">パネルC</button>
</div>
<div id="panel-a" class="group-panel">パネルAのコンテンツ</div>
<div id="panel-b" class="group-panel" style="display:none;">パネルBのコンテンツ</div>
<div id="panel-c" class="group-panel" style="display:none;">パネルCのコンテンツ</div>

$(function () {
  $('.group-btn').on('click', function () {
    var target = $(this).data('target');
    var $target = $(target);

    if ($target.is(':visible')) {
      // すでに開いているパネルをクリック → 閉じる
      $target.slideUp(250);
    } else {
      // 他のパネルを閉じてから対象パネルを開く（排他制御）
      $('.group-panel').not($target).slideUp(250);
      $target.slideDown(250);
    }
  });
});

aria-expanded属性でアクセシビリティ対応する

スクリーンリーダーのユーザーが「このボタンを押すと何が起きるか」を理解できるよう、aria-expanded 属性を設定します。

<button id="acc-btn" aria-expanded="false" aria-controls="acc-panel">
  詳細を見る
</button>
<div id="acc-panel" hidden>
  <p>詳細コンテンツです。</p>
</div>

$(function () {
  $('#acc-btn').on('click', function () {
    var $btn   = $(this);
    var $panel = $('#acc-panel');
    var expanded = $btn.attr('aria-expanded') === 'true';

    // aria-expandedを更新
    $btn.attr('aria-expanded', !expanded);

    // hidden属性とアニメーションを組み合わせる
    if (expanded) {
      $panel.slideUp(300, function () {
        $(this).attr('hidden', true);
      });
    } else {
      $panel.removeAttr('hidden').hide().slideDown(300);
    }
  });
});

方法の比較と使い分け

まとめ

jQueryでボタンクリックによる表示・非表示切り替えを実装する際のポイントは次の通りです。

• シンプルな切り替えには toggle()、明示的な制御には show()/hide()
• アニメーションが必要なら slideToggle()/fadeToggle() + stop(true, true) で連打対策
• パフォーマンスを重視するならCSSクラス + transition の組み合わせ
• アクセシビリティのために aria-expanded 属性を更新する
• ボタンのテキストも表示状態に合わせて変えるとUXが向上する

関連記事: addClass/removeClass/toggleClass完全ガイド / アニメーション完全ガイド / アコーディオン実装完全ガイド / 指定した条件で要素を表示・非表示にする

よくある質問（FAQ）