【jQuery】アコーディオン実装方法の完全比較｜details要素・CSSのみ・jQuery・ネスト・アクセシビリティまで

アコーディオンUIは「HTML標準の <details> 要素」「CSSのみ（JavaScriptなし）」「jQueryのslideToggle()」の3つの方法で実装できます。本記事ではそれぞれの特徴と使い分けを解説し、ネスト（入れ子）・アクセシビリティ完全対応・大量項目のパフォーマンス最適化まで踏み込みます。

<details>/<summary>で実装する（ブラウザネイティブ）

HTML標準の <details> 要素を使えば、JavaScriptなしでアコーディオンが実装できます。最もシンプルで、SEO的にもコンテンツがHTMLに直接含まれるためクローラーに優しいです。

<details>
  <summary>Q. 返品・交換はできますか？</summary>
  <p>商品到着後7日以内であれば返品・交換を承ります。</p>
</details>

<details open>
  <summary>Q. 配送はどのくらいかかりますか？</summary>
  <p>通常2〜3営業日でお届けします。</p>
</details>

/* details要素のスタイリング */
details {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

summary {
  padding: 14px 16px;
  cursor: pointer;
  background: #f8fafc;
  font-weight: 600;
  list-style: none;  /* デフォルトの▶を非表示 */
  user-select: none;
}

summary::after {
  content: "＋";
  float: right;
}

details[open] summary::after {
  content: "－";
}

details > p {
  padding: 12px 16px;
  margin: 0;
}

CSSのみで実装する（JavaScriptなし）

チェックボックスハックや :focus-within を使ったCSS単体の実装はJavaScriptを読み込まない環境（AMP・SSRなど）で有効です。ここでは max-height トランジションを使った実装を紹介します。

<!-- チェックボックスハックを使うCSS-onlyアコーディオン -->
<div class="css-acc">
  <input type="checkbox" id="acc1" class="css-acc-toggle">
  <label for="acc1" class="css-acc-header">セクション1</label>
  <div class="css-acc-body">
    <p>セクション1の内容です。</p>
  </div>
</div>

<div class="css-acc">
  <input type="checkbox" id="acc2" class="css-acc-toggle">
  <label for="acc2" class="css-acc-header">セクション2</label>
  <div class="css-acc-body">
    <p>セクション2の内容です。</p>
  </div>
</div>

.css-acc-toggle {
  display: none;  /* チェックボックス本体は非表示 */
}

.css-acc-header {
  display: block;
  padding: 14px 16px;
  background: #f1f5f9;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid #d1d5db;
  margin-bottom: 2px;
}

.css-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* チェックされたときにmax-heightを広げる */
.css-acc-toggle:checked + .css-acc-header + .css-acc-body {
  max-height: 500px;  /* コンテンツの最大高さより大きい値を設定 */
}

jQueryのslideToggle()で実装する（基本）

slideToggle() はコンテンツの実際の高さを自動計算してアニメーションするため、CSSの max-height 問題がありません。排他制御（1つ開いたら他を閉じる）も自然に実装できます。

<div class="jq-acc">
  <div class="jq-header">セクション1</div>
  <div class="jq-body">
    <p>セクション1の内容です。</p>
  </div>
</div>
<div class="jq-acc">
  <div class="jq-header">セクション2</div>
  <div class="jq-body">
    <p>長いコンテンツでも高さを自動計算します。</p>
  </div>
</div>

$(function () {
  // 初期状態: 全て閉じる
  $('.jq-body').hide();

  $('.jq-header').on('click', function () {
    var $body = $(this).next('.jq-body');
    var isOpen = $body.is(':visible');

    // 排他制御: 他を全て閉じる
    $('.jq-body').slideUp(200);
    $('.jq-header').removeClass('is-open');

    // クリックしたものが閉じていれば開く
    if (!isOpen) {
      $body.slideDown(200);
      $(this).addClass('is-open');
    }
  });
});

ネスト（入れ子）アコーディオンの実装

FAQ のカテゴリを折りたたみ、その中に個々のQ&Aがある「2段階アコーディオン」のような入れ子構造の実装です。クリックイベントの伝播（バブリング）対策がポイントです。

<div class="nest-acc outer">
  <div class="nest-header outer-header">カテゴリ: 配送について</div>
  <div class="nest-body outer-body">
    <div class="nest-acc inner">
      <div class="nest-header inner-header">Q. 配送日数は？</div>
      <div class="nest-body inner-body"><p>通常2〜3営業日です。</p></div>
    </div>
    <div class="nest-acc inner">
      <div class="nest-header inner-header">Q. 送料はかかりますか？</div>
      <div class="nest-body inner-body"><p>5,000円以上で送料無料です。</p></div>
    </div>
  </div>
</div>

$(function () {
  $('.nest-body').hide();

  // 外側アコーディオン
  $('.outer-header').on('click', function (e) {
    e.stopPropagation();  // 内側への伝播を防ぐ
    $(this).next('.outer-body').slideToggle(200);
    $(this).toggleClass('is-open');
  });

  // 内側アコーディオン
  $('.inner-header').on('click', function (e) {
    e.stopPropagation();  // 外側への伝播を防ぐ
    var $body  = $(this).next('.inner-body');
    var isOpen = $body.is(':visible');
    // 同じ外側の内側アイテムを排他制御
    $(this).closest('.outer-body').find('.inner-body').slideUp(150);
    $(this).closest('.outer-body').find('.inner-header').removeClass('is-open');
    if (!isOpen) {
      $body.slideDown(150);
      $(this).addClass('is-open');
    }
  });
});

アクセシビリティ完全対応版

スクリーンリーダーやキーボード操作のユーザーにも使いやすいアコーディオンを実装します。aria-expanded・aria-controls・キーボードナビゲーションが必要です。

<div class="a11y-acc">
  <button class="a11y-header"
          aria-expanded="false"
          aria-controls="panel1"
          id="btn1">
    セクション1
  </button>
  <div class="a11y-body" id="panel1" role="region" aria-labelledby="btn1" hidden>
    <p>セクション1の内容です。</p>
  </div>
</div>

<div class="a11y-acc">
  <button class="a11y-header"
          aria-expanded="false"
          aria-controls="panel2"
          id="btn2">
    セクション2
  </button>
  <div class="a11y-body" id="panel2" role="region" aria-labelledby="btn2" hidden>
    <p>セクション2の内容です。</p>
  </div>
</div>

$(function () {
  var $headers = $('.a11y-header');

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

    // 他を閉じる（アニメーション後にhidden属性を付与）
    $headers.not($btn).attr('aria-expanded', 'false');
    $headers.not($btn).each(function () {
      var $p = $('#' + $(this).attr('aria-controls'));
      $p.slideUp(200, function () { $p.attr('hidden', true); });
    });

    // 対象を開閉
    if (isOpen) {
      $btn.attr('aria-expanded', 'false');
      $panel.slideUp(200, function () { $panel.attr('hidden', true); });
    } else {
      $btn.attr('aria-expanded', 'true');
      $panel.removeAttr('hidden').hide().slideDown(200);
    }
  });

  // キーボード操作: ↑↓で前後のヘッダーにフォーカス移動
  $headers.on('keydown', function (e) {
    var idx   = $headers.index(this);
    var total = $headers.length;
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      $headers.eq((idx + 1) % total).trigger('focus');
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      $headers.eq((idx - 1 + total) % total).trigger('focus');
    } else if (e.key === 'Home') {
      e.preventDefault();
      $headers.first().trigger('focus');
    } else if (e.key === 'End') {
      e.preventDefault();
      $headers.last().trigger('focus');
    }
  });
});

大量項目のパフォーマンス最適化

アコーディオンのパネルが100件以上ある場合、全件にイベントをバインドするとメモリ使用量が増加します。イベント委譲で1つの親要素にバインドするのが効果的です。

$(function () {
  // BAD: 全てのヘッダーにイベントを個別バインド（100件なら100回登録）
  // $('.acc-header').on('click', function() { ... });

  // GOOD: 親要素1つにイベント委譲（何件でも1回の登録）
  $('#acc-container').on('click', '.acc-header', function () {
    var $body  = $(this).next('.acc-body');
    var isOpen = $body.is(':visible');

    $('#acc-container .acc-body').slideUp(150);
    $('#acc-container .acc-header').removeClass('is-open');

    if (!isOpen) {
      $body.slideDown(150);
      $(this).addClass('is-open');
    }
  });

  // slideUp/Downが重い場合はCSSトランジション+クラス切り替えが高速
  $('#acc-container').on('click', '.fast-header', function () {
    var $acc = $(this).closest('.fast-acc');
    $acc.siblings().removeClass('is-open');
    $acc.toggleClass('is-open');
  });
});

実装方法の比較と選び方

まとめ

アコーディオンの実装方法は用途によって使い分けが重要です。基本のjQuery実装から始め、要件に応じてアクセシビリティ対応やパフォーマンス最適化を加えていくアプローチを推奨します。

関連記事: アコーディオンの実装完全ガイド（排他制御・アイコン回転・URLハッシュ） / アニメーション完全ガイド（animate・slideToggle） / 初回アクセス時のみアコーディオンを開く完全ガイド

よくある質問（FAQ）