【jQuery】slideToggle()がカクつく・ガタつく原因と対処法完全ガイド｜paddingマージン・CSSトランジション・アコーディオンまで

jQueryの slideToggle() が「ガタつく」「最初にジャンプする」という問題は、margin・padding の扱いやHTML構造が原因であることがほとんどです。この記事ではカクつきの原因別の対処法・CSSトランジションへの移行・スムーズなアコーディオン実装まで解説します。

カクつく原因のまとめ

原因1: paddingによるジャンプの対処法

slideToggle対象の要素に直接paddingを設定すると、スライド開始時にpaddingが瞬時に適用されてジャンプします。解決策はpadding管理を内側のラッパー要素に移すことです。

<!-- NG: 直接paddingを設定 -->
<div class="panel" style="display:none; padding: 16px;">コンテンツ</div>

<!-- OK: 外側は padding なし、内側でpadding管理 -->
<div class="panel" style="display:none;">
  <div class="panel-inner" style="padding: 16px;">コンテンツ</div>
</div>

// 外側の .panel に対して slideToggle
$('.toggle-btn').on('click', function () {
  $('.panel').slideToggle(300);
});

原因2: 子要素のmarginによるガタつきの対処法

スライド領域内の子要素に margin-top や margin-bottom があると、コンテナのオーバーフロー設定によってはガタつきが生じます。

/* NG: 子要素に margin がある */
.panel p {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* OK: margin の代わりに padding を使う */
.panel p {
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
}

/* または overflow: hidden で margin を封じ込める */
.panel {
  overflow: hidden;
}

CSSトランジションでスムーズに切り替える（推奨）

jQueryの slideToggle() よりも、CSSの max-height トランジションの方がGPU加速で滑らかに動作します。

.panel {
  overflow:    hidden;
  max-height:  0;
  transition:  max-height 0.3s ease;
}
.panel.is-open {
  max-height:  500px; /* コンテンツの最大高さより大きい値に設定 */
}

$(function () {
  $('.toggle-btn').on('click', function () {
    // クラスを付け外しするだけ（CSSがアニメーションを担当）
    $(this).next('.panel').toggleClass('is-open');
  });
});

スムーズなアコーディオンの実装

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">セクション1</button>
    <div class="accordion-body"><p>コンテンツ1</p></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">セクション2</button>
    <div class="accordion-body"><p>コンテンツ2</p></div>
  </div>
</div>

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}
.accordion-body.is-open {
  max-height: 400px;
  padding: 12px 16px;
}

$(function () {
  $('.accordion-header').on('click', function () {
    var $body = $(this).next('.accordion-body');

    // 他の開いているパネルを閉じる（アコーディオン動作）
    $('.accordion-body.is-open').not($body).removeClass('is-open');

    $body.toggleClass('is-open');
  });
});

まとめ

slideToggle()のカクつき対処ポイントをまとめます。

• padding問題: スライド要素には直接padding不可 → 内側のラッパーで管理
• margin問題: 子要素のmarginをpaddingに変更 or overflow:hiddenで封じ込め
• 推奨: CSSの max-height トランジションに移行（GPU加速で滑らか）
• アコーディオン: CSSクラスのtoggleClassで実装するとシンプル

関連記事: 「もっと見る」で要素を折りたたむ完全ガイド / CSSアニメーション終了時に処理を行う方法

よくある質問（FAQ）