Web BENTO JS
カテゴリ一覧
アコーディオン

03 / ACCORDION 12 パーツ

JSアコーディオン実装 12選

Q: コピーしたアコーディオンはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

Q: 同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

Q: 開閉のなめらかなアニメーションはどう実現していますか？

CSS Grid の grid-template-rows を 0fr から 1fr へ変化させる方法を使っています。中身の高さを JavaScript で測る必要がなく、可変コンテンツでもなめらかに開閉します。

Q: アクセシビリティには対応していますか？

見出しは button 要素なのでキーボード（Enter / Space）で操作でき、開閉状態は aria-expanded 属性でスクリーンリーダーに伝わります。details/summary 版はブラウザ標準のセマンティクスをそのまま使えます。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「排他式（1つだけ開く）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くアコーディオン（開閉パネル）のサンプル集です。プレビューは実際にクリックで開閉できます。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。

該当するパーツが見つかりませんでした。

クリックでなめらかに開閉します。中身の高さは自動計算不要（CSS Gridの0fr→1fr）。

ベーシック

<div class="bnto-acc" data-bnto-acc>
  <button type="button" class="bnto-acc-head">
    見出しテキスト
    <svg class="ar" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-acc-body"><div>
    <div class="bnto-acc-inner">サンプル文章がここに入ります。</div>
  </div></div>
</div>

.bnto-acc {
  --c1: hsl(202 73% 50%);  /* アクセント色 */
  --dur: .3s;               /* 開閉スピード */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-acc-head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 16px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc-head .ar { transition: transform var(--dur); color: var(--c1); }
.bnto-acc.is-open .bnto-acc-head .ar { transform: rotate(180deg); }
/* 0fr→1fr で高さ計算いらずの開閉アニメ */
.bnto-acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc-body > div { overflow: hidden; }
.bnto-acc.is-open .bnto-acc-body { grid-template-rows: 1fr; }
.bnto-acc-inner { padding: 0 16px 14px; line-height: 1.8; }

// data-bnto-acc を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  document.querySelectorAll('[data-bnto-acc]').forEach(function (acc) {
    if (acc.dataset.bntoInit) return;
    acc.dataset.bntoInit = '1';
    var head = acc.querySelector('.bnto-acc-head');
    head.setAttribute('aria-expanded', acc.classList.contains('is-open'));
    head.addEventListener('click', function () {
      var open = acc.classList.toggle('is-open');
      head.setAttribute('aria-expanded', open);
    });
  });
})();

使い方のコツ

最初から開いた状態にしたいときは、<div class="bnto-acc is-open"> のように is-open を付けておくだけです。開閉スピードは --dur を変更してください。

排他式。ひとつ開くと、ほかの項目は自動で閉じます。

サンプル文章です。項目ごとに自由な長さの説明文を入れられます。

サンプル文章です。開くと他の項目は自動で閉じます。

排他式（1つだけ開く）

<!-- .it を必要なだけ並べる。最初に開くものに is-open -->
<div class="bnto-acc2" data-bnto-acc-solo>
  <div class="it is-open">
    <button type="button" class="hd">見出し1
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章1</div></div></div>
  </div>
  <div class="it">
    <button type="button" class="hd">見出し2
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章2</div></div></div>
  </div>
</div>

.bnto-acc2 {
  --c1: hsl(150 58% 42%); --dur: .3s;
  display: flex; flex-direction: column; gap: 8px;
}
.bnto-acc2 .it {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc2 .it.is-open { border-color: var(--c1); }
.bnto-acc2 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc2 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc2 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc2 .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc2 .bd > div { overflow: hidden; }
.bnto-acc2 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc2 .in { padding: 0 14px 12px; line-height: 1.75; }

// グループ内でひとつだけ開く排他アコーディオン
(function () {
  document.querySelectorAll('[data-bnto-acc-solo]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    var items = Array.prototype.slice.call(group.querySelectorAll(':scope > .it'));
    items.forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var willOpen = !item.classList.contains('is-open');
        items.forEach(function (other) {
          other.classList.remove('is-open');
          other.querySelector('.hd').setAttribute('aria-expanded', 'false');
        });
        if (willOpen) {
          item.classList.add('is-open');
          head.setAttribute('aria-expanded', 'true');
        }
      });
    });
  });
})();

使い方のコツ

料金プランの説明やステップ式の案内など「同時に1つだけ見せたい」場面に向いています。全部閉じることも可能です（開いている項目をもう一度クリック）。

商品到着後7日以内であれば可能です。

5,000円以上のご注文で無料になります。

FAQ（よくある質問）

<div class="bnto-faq" data-bnto-faq>
  <div class="it">
    <button type="button" class="hd"><span class="q">Q</span>質問文をここに</button>
    <div class="bd"><div><div class="in">回答のサンプル文章をここに</div></div></div>
  </div>
  <!-- .it を質問の数だけ繰り返し -->
</div>

.bnto-faq {
  --c1: hsl(345 80% 55%); --dur: .3s;
  background: #fff; border-radius: 14px;
  padding: 4px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-faq .it { border-bottom: 2px dashed #DFE9F1; }
.bnto-faq .it:last-child { border-bottom: none; }
.bnto-faq .hd {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 12px 0;
  background: none; border: none; text-align: left;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-faq .q {
  flex: none; width: 22px; height: 22px;
  border-radius: 7px; background: var(--c1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.bnto-faq .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-faq .bd > div { overflow: hidden; }
.bnto-faq .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-faq .in { padding: 0 0 12px 31px; line-height: 1.75; }

// FAQ：各質問を個別に開閉
(function () {
  document.querySelectorAll('[data-bnto-faq]').forEach(function (faq) {
    if (faq.dataset.bntoInit) return;
    faq.dataset.bntoInit = '1';
    faq.querySelectorAll('.it').forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', 'false');
      head.addEventListener('click', function () {
        var open = item.classList.toggle('is-open');
        head.setAttribute('aria-expanded', open);
      });
    });
  });
})();

使い方のコツ

FAQはページ内で疑問を解消できる、SEOとユーザビリティの両面で有効なコンテンツです。なお、FAQPage 構造化データによる検索結果でのQ&A表示（リッチリザルト）は、現在は政府機関・医療系など一部のサイトに限定されています。

＋アイコンが45度回転して×になります。疑似要素だけで作っているので画像不要。

プラス→バツ

<div class="bnto-acc4" data-bnto-acc4>
  <button type="button" class="hd">
    見出しテキスト
    <span class="pl" aria-hidden="true"></span>
  </button>
  <div class="bd"><div>
    <div class="in">サンプル文章がここに入ります。</div>
  </div></div>
</div>

.bnto-acc4 {
  --c1: hsl(26 90% 55%); --dur: .3s;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-acc4 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 16px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ＋アイコン（疑似要素の2本線） */
.bnto-acc4 .pl { position: relative; width: 18px; height: 18px; transition: transform var(--dur); }
.bnto-acc4 .pl::before, .bnto-acc4 .pl::after { content: ""; position: absolute; background: var(--c1); border-radius: 2px; }
.bnto-acc4 .pl::before { left: 8px; top: 1px; width: 3px; height: 16px; }
.bnto-acc4 .pl::after { left: 1px; top: 8px; width: 16px; height: 3px; }
.bnto-acc4.is-open .pl { transform: rotate(45deg); }
.bnto-acc4 .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) ease; }
.bnto-acc4 .bd > div { overflow: hidden; }
.bnto-acc4.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc4 .in { padding: 0 16px 14px; line-height: 1.8; }

(function () {
  document.querySelectorAll('[data-bnto-acc4]').forEach(function (acc) {
    if (acc.dataset.bntoInit) return;
    acc.dataset.bntoInit = '1';
    var head = acc.querySelector('.hd');
    head.setAttribute('aria-expanded', acc.classList.contains('is-open'));
    head.addEventListener('click', function () {
      var open = acc.classList.toggle('is-open');
      head.setAttribute('aria-expanded', open);
    });
  });
})();

使い方のコツ

「＋＝もっと見られる」という記号は直感的で、FAQやメニューと好相性です。回転角を 135deg にすると勢いのある動きになります。

開いている項目がひと目で分かるスタイル。ナビゲーションにも向いています。

塗りつぶしヘッダー

<div class="bnto-acc5" data-bnto-acc5>
  <button type="button" class="hd">
    見出しテキスト
    <svg class="ar" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bd"><div>
    <div class="in">サンプル文章がここに入ります。</div>
  </div></div>
</div>

.bnto-acc5 {
  --c1: hsl(258 47% 54%); --dur: .3s;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-acc5 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 16px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.bnto-acc5.is-open .hd { background: var(--c1); color: #fff; }
.bnto-acc5 .ar { transition: transform var(--dur); }
.bnto-acc5.is-open .ar { transform: rotate(180deg); }
.bnto-acc5 .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) ease; }
.bnto-acc5 .bd > div { overflow: hidden; }
.bnto-acc5.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc5 .in { padding: 12px 16px 14px; line-height: 1.8; }

(function () {
  document.querySelectorAll('[data-bnto-acc5]').forEach(function (acc) {
    if (acc.dataset.bntoInit) return;
    acc.dataset.bntoInit = '1';
    var head = acc.querySelector('.hd');
    head.setAttribute('aria-expanded', acc.classList.contains('is-open'));
    head.addEventListener('click', function () {
      var open = acc.classList.toggle('is-open');
      head.setAttribute('aria-expanded', open);
    });
  });
})();

使い方のコツ

「今どこが開いているか」が色で分かるので、項目数が多いページに向きます。文字色とのコントラストには注意してください（白文字なら背景はやや濃い色に）。

サンプル文章です。開いたカードは影が濃くなり浮き上がります。

サンプル文章です。各カードは独立して開閉できます。

カード分離型

<div class="bnto-acc6" data-bnto-acc6>
  <div class="it">
    <button type="button" class="hd">見出し
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章</div></div></div>
  </div>
  <!-- .it を必要な数だけ -->
</div>

.bnto-acc6 {
  --c1: hsl(187 63% 42%); --dur: .3s;
  display: flex; flex-direction: column; gap: 9px;
}
.bnto-acc6 .it {
  background: #fff; border-radius: 13px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06); overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
}
.bnto-acc6 .it.is-open {
  box-shadow: 0 12px 26px rgba(0,0,0,.13);
  transform: translateY(-2px);
}
.bnto-acc6 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 15px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc6 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc6 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc6 .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) ease; }
.bnto-acc6 .bd > div { overflow: hidden; }
.bnto-acc6 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc6 .in { padding: 0 15px 13px; line-height: 1.75; }

(function () {
  document.querySelectorAll('[data-bnto-acc6]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    group.querySelectorAll('.it').forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var open = item.classList.toggle('is-open');
        head.setAttribute('aria-expanded', open);
      });
    });
  });
})();

使い方のコツ

カード同士が離れているので、項目が独立した内容のとき（サービス紹介・機能説明など）に最適です。背景に薄い色を敷くとカードの浮きが際立ちます。

サンプル文章です。開いている項目の左にアクセントラインが付きます。

サンプル文章です。背景もほんのり色付きます。

左ライン点灯

<div class="bnto-acc7" data-bnto-acc7>
  <div class="it">
    <button type="button" class="hd">見出し
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章</div></div></div>
  </div>
  <!-- .it を必要な数だけ -->
</div>

.bnto-acc7 {
  --c1: hsl(41 100% 47%); --dur: .3s;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.07);
}
.bnto-acc7 .it {
  border-left: 4px solid transparent;
  transition: border-color var(--dur), background var(--dur);
}
.bnto-acc7 .it + .it { border-top: 2px solid #EAF2F8; }
.bnto-acc7 .it.is-open { border-left-color: var(--c1); background: #F6FAFD; }
.bnto-acc7 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 15px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc7 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc7 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc7 .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) ease; }
.bnto-acc7 .bd > div { overflow: hidden; }
.bnto-acc7 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc7 .in { padding: 0 15px 12px; line-height: 1.75; }

(function () {
  document.querySelectorAll('[data-bnto-acc7]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    group.querySelectorAll('.it').forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var open = item.classList.toggle('is-open');
        head.setAttribute('aria-expanded', open);
      });
    });
  });
})();

使い方のコツ

マニュアルや利用規約など、長いリストで「現在地」を示したいときに便利です。ホバー時にも薄いラインを出すとさらに操作しやすくなります。

details/summary 版 1

HTML標準のdetails要素。name属性を揃えるとJSなしで排他開閉になります。

details/summary 版 2

こちらを開くと1が自動で閉じます（ブラウザ標準機能）。

details/summary（JS不要）

<!-- name を揃えると1つだけ開く（JS不要のブラウザ標準機能） -->
<div class="bnto-acc8">
  <details name="faq">
    <summary>質問1</summary>
    <div class="in">回答1</div>
  </details>
  <details name="faq">
    <summary>質問2</summary>
    <div class="in">回答2</div>
  </details>
</div>

.bnto-acc8 {
  --c1: hsl(119 35% 45%);
  display: flex; flex-direction: column; gap: 8px;
}
.bnto-acc8 details {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc8 details[open] { border-color: var(--c1); }
.bnto-acc8 summary {
  list-style: none;
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 11px 14px; font-weight: 800; cursor: pointer;
}
.bnto-acc8 summary::-webkit-details-marker { display: none; }
/* シェブロンを疑似要素で */
.bnto-acc8 summary::after {
  content: ""; width: 9px; height: 9px;
  border-right: 2.5px solid var(--c1);
  border-bottom: 2.5px solid var(--c1);
  transform: rotate(45deg); transition: transform .25s;
  margin-top: -4px;
}
.bnto-acc8 details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.bnto-acc8 .in {
  padding: 0 14px 12px; line-height: 1.75;
  animation: bnto-acc8-in .3s ease;
}
@keyframes bnto-acc8-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

使い方のコツ

JSを1行も書かずに動く最軽量の選択肢です。キーボード操作・スクリーンリーダー対応もブラウザ任せでOKです。中身が検索エンジンに読まれやすいのも利点です。なお、name属性による排他開閉は2024年前後にリリースされた主要ブラウザで利用できます。古いブラウザでは排他にならず、個別開閉として動作します（壊れはしません）。なめらかな高さアニメが必要なら他のパーツをお使いください。

サンプル文章です。上のボタンで全項目を一括開閉できます。

サンプル文章です。各項目は個別にも開閉できます。

サンプル文章です。長い仕様書やFAQで活躍します。

一括開閉ボタン付き

<!-- .ctrl の2ボタンで一括開閉。.it は必要なだけ -->
<div class="bnto-acc9" data-bnto-acc-all>
  <div class="ctrl">
    <button type="button" class="all-open">すべて開く</button>
    <button type="button" class="all-close">すべて閉じる</button>
  </div>
  <div class="it">
    <button type="button" class="hd">見出し1
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章1</div></div></div>
  </div>
  <div class="it">
    <button type="button" class="hd">見出し2
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">サンプル文章2</div></div></div>
  </div>
</div>

.bnto-acc9 {
  --c1: hsl(292 45% 52%); --dur: .3s;
  display: flex; flex-direction: column; gap: 8px;
}
/* 一括開閉ボタン */
.bnto-acc9 .ctrl { display: flex; justify-content: flex-end; gap: 6px; }
.bnto-acc9 .ctrl button {
  padding: 6px 12px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px; color: var(--c1);
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  transition: border-color var(--dur);
}
.bnto-acc9 .ctrl button:hover { border-color: var(--c1); }
.bnto-acc9 .it {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc9 .it.is-open { border-color: var(--c1); }
.bnto-acc9 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: none;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc9 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc9 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc9 .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc9 .bd > div { overflow: hidden; }
.bnto-acc9 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc9 .in { padding: 0 14px 12px; line-height: 1.75; }
/* 動きを控えたい設定のユーザーには即時開閉 */
@media (prefers-reduced-motion: reduce) {
  .bnto-acc9 { --dur: 0s; }
}

// 一括開閉ボタン＋個別開閉（複数設置OK・二重実行OK）
(function () {
  document.querySelectorAll('[data-bnto-acc-all]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    var items = Array.prototype.slice.call(group.querySelectorAll('.it'));
    function setItem(item, open) {
      item.classList.toggle('is-open', open);
      item.querySelector('.hd').setAttribute('aria-expanded', open);
    }
    items.forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        setItem(item, !item.classList.contains('is-open'));
      });
    });
    group.querySelector('.all-open').addEventListener('click', function () {
      items.forEach(function (item) { setItem(item, true); });
    });
    group.querySelector('.all-close').addEventListener('click', function () {
      items.forEach(function (item) { setItem(item, false); });
    });
  });
})();

使い方のコツ

仕様書・FAQ・利用規約など、項目数が多い長いページで活躍します。「すべて開く」にしておけばブラウザのページ内検索（Ctrl+F / ⌘F）で折りたたまれた本文もヒットしやすくなり、印刷前の展開にも便利です。各項目は個別にも開閉できます。

3件

5,000円以上のご注文で送料無料、それ未満は全国一律550円です。

商品到着後7日以内であれば、未開封に限り返品を受け付けています。

クレジットカード・銀行振込・コンビニ払いに対応しています。

検索で絞り込めるFAQ

<!-- .it を必要なだけ並べる。質問文・回答文の両方が検索対象 -->
<div class="bnto-acc10" data-bnto-filteraccordion>
  <div class="srch">
    <input class="kw" type="search" placeholder="キーワードで絞り込み" aria-label="FAQを絞り込み">
    <span class="cnt" aria-live="polite"></span>
  </div>
  <div class="it">
    <button type="button" class="hd">質問1
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">回答1</div></div></div>
  </div>
  <div class="it">
    <button type="button" class="hd">質問2
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">回答2</div></div></div>
  </div>
  <!-- 0件のときに表示されるメッセージ -->
  <p class="ns" hidden>一致する質問が見つかりませんでした</p>
</div>

.bnto-acc10 {
  --c1: hsl(217 70% 50%);  /* アクセント色 */
  --dur: .3s;               /* 開閉スピード */
  display: flex; flex-direction: column; gap: 8px;
}
.bnto-acc10 .srch { display: flex; align-items: center; gap: 8px; }
.bnto-acc10 .kw {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 2px solid #DFE9F1; border-radius: 999px;
  font: inherit; font-size: 12.5px;
}
.bnto-acc10 .kw:focus { outline: none; border-color: var(--c1); }
.bnto-acc10 .cnt { flex: none; font-size: 11.5px; font-weight: 800; color: var(--c1); }
.bnto-acc10 .it {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc10 .it.is-open { border-color: var(--c1); }
.bnto-acc10 .it[hidden] { display: none; }  /* 不一致の項目は非表示 */
.bnto-acc10 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: none; text-align: left;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc10 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc10 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc10 .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc10 .bd > div { overflow: hidden; }
.bnto-acc10 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc10 .in { padding: 0 14px 12px; line-height: 1.75; }
.bnto-acc10 .ns { margin: 0; font-size: 12px; font-weight: 700; text-align: center; }
.bnto-acc10 .ns[hidden] { display: none; }

// 検索で絞り込めるFAQ：入力キーワードに一致する項目だけ表示＋ヒット数表示
(function () {
  document.querySelectorAll('[data-bnto-filteraccordion]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    var input = group.querySelector('.kw');
    var cnt = group.querySelector('.cnt');
    var ns = group.querySelector('.ns');
    var items = Array.prototype.slice.call(group.querySelectorAll('.it'));
    // 通常の開閉
    items.forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var open = item.classList.toggle('is-open');
        head.setAttribute('aria-expanded', open);
      });
    });
    // 質問と回答のテキスト全体を対象に部分一致で絞り込み
    function filter() {
      var q = input.value.trim().toLowerCase();
      var hit = 0;
      items.forEach(function (item) {
        var ok = !q || item.textContent.toLowerCase().indexOf(q) !== -1;
        item.hidden = !ok;  // 一致する項目だけ表示
        if (ok) hit++;
      });
      if (cnt) cnt.textContent = hit + '件';
      if (ns) ns.hidden = hit > 0;  // 0件メッセージ
    }
    input.addEventListener('input', filter);
    filter();
  });
})();

使い方のコツ

項目数が多いFAQページの定番強化です。item.textContent 全体を検索対象にしているため、質問文と回答文のどちらでもヒットします。0件時のメッセージは .ns のテキストを書き換えるだけです。ヒット数の表示が不要なら .cnt を削除してもそのまま動きます。

プランの詳細は子アコーディオンから開けます。親を閉じると子も一緒に閉じます。

月額980円。個人利用向けの基本機能が使えます。

月額2,980円。チーム利用と優先サポート付きです。

1か月単位で契約でき、いつでも解約できます。子の無い項目は普通のアコーディオンとして動きます。

入れ子アコーディオン

<!-- 親の .in の中に .sub → 子の .it を入れる（構造は親と同じ） -->
<div class="bnto-acc11" data-bnto-nestaccordion>
  <div class="it">
    <button type="button" class="hd">親項目
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">親の説明文
      <div class="sub">
        <div class="it">
          <button type="button" class="hd">子項目
            <svg class="ar" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div class="bd"><div><div class="in">子の説明文</div></div></div>
        </div>
      </div>
    </div></div></div>
  </div>
</div>

.bnto-acc11 {
  --c1: hsl(32 85% 50%);  /* アクセント色 */
  --dur: .3s;              /* 開閉スピード */
  display: flex; flex-direction: column; gap: 8px;
}
.bnto-acc11 .it {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc11 .it.is-open { border-color: var(--c1); }
.bnto-acc11 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: none; text-align: left;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc11 .ar { color: var(--c1); transition: transform var(--dur); }
/* 「>」の直下指定で、親の開閉が子に波及しないようにする */
.bnto-acc11 .it.is-open > .hd .ar { transform: rotate(180deg); }
.bnto-acc11 .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc11 .bd > div { overflow: hidden; }
.bnto-acc11 .it.is-open > .bd { grid-template-rows: 1fr; }
.bnto-acc11 .in { padding: 0 14px 12px; line-height: 1.75; }
/* 子アコーディオンは少し小さめに */
.bnto-acc11 .sub { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bnto-acc11 .sub .it { border-radius: 10px; background: #F6FAFD; }
.bnto-acc11 .sub .hd { padding: 9px 12px; font-size: 12px; }
.bnto-acc11 .sub .in { padding: 0 12px 10px; font-size: 12px; }

// 入れ子アコーディオン：親を閉じると中の子もまとめて閉じる
(function () {
  document.querySelectorAll('[data-bnto-nestaccordion]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    // 親も子も同じ .it 構造なので、まとめて初期化できる
    group.querySelectorAll('.it').forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var open = item.classList.toggle('is-open');
        head.setAttribute('aria-expanded', open);
        if (!open) {
          // 親を閉じたら、中で開いている子アコーディオンも閉じる
          item.querySelectorAll('.it.is-open').forEach(function (child) {
            child.classList.remove('is-open');
            child.querySelector('.hd').setAttribute('aria-expanded', 'false');
          });
        }
      });
    });
  });
})();

使い方のコツ

カテゴリ→詳細のような階層のあるFAQやメニューに向いています。親を閉じると子も自動で閉じるので、開閉状態の食い違いが起きません。CSSは >（直下セレクター）で親と子を区別しているため、さらに深い階層もそのまま入れ子にできますが、読みやすさの面では2階層程度がおすすめです。

ご注文から2〜3営業日で発送します。項目を開くとURLに #faq-post が付きます。

到着後7日以内なら返品できます。#付きのURLを共有すると、この項目が開いた状態で表示されます。

クレジットカードと銀行振込がご利用いただけます。

ハッシュ連動アコーディオン

<!-- 各 .it に一意の id を付ける。#id 付きURLで開くと自動で開いてスクロール -->
<div class="bnto-acc12" data-bnto-hashaccordion>
  <!-- デモ用の疑似リンク（本番では <a href="#faq-post"> でOK） -->
  <div class="lk">
    <button type="button" class="jp" data-target="faq-post">#faq-post を開く</button>
    <button type="button" class="jp" data-target="faq-return">#faq-return を開く</button>
  </div>
  <div class="it" id="faq-post">
    <button type="button" class="hd">配送について
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">回答1</div></div></div>
  </div>
  <div class="it" id="faq-return">
    <button type="button" class="hd">返品について
      <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div class="bd"><div><div class="in">回答2</div></div></div>
  </div>
</div>

.bnto-acc12 {
  --c1: hsl(160 55% 40%);  /* アクセント色 */
  --dur: .3s;               /* 開閉スピード */
  display: flex; flex-direction: column; gap: 8px;
}
/* デモ用の疑似リンク（本番の a タグでは不要） */
.bnto-acc12 .lk { display: flex; flex-wrap: wrap; gap: 6px; }
.bnto-acc12 .jp {
  padding: 6px 12px; border: 2px solid #DFE9F1; border-radius: 999px;
  background: #fff; color: var(--c1);
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc12 .jp:hover { border-color: var(--c1); }
.bnto-acc12 .it {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
}
.bnto-acc12 .it.is-open { border-color: var(--c1); }
.bnto-acc12 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: none; text-align: left;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-acc12 .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-acc12 .it.is-open .ar { transform: rotate(180deg); }
.bnto-acc12 .bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) ease;
}
.bnto-acc12 .bd > div { overflow: hidden; }
.bnto-acc12 .it.is-open .bd { grid-template-rows: 1fr; }
.bnto-acc12 .in { padding: 0 14px 12px; line-height: 1.75; }

// ハッシュ連動アコーディオン：#id で自動オープン＋クリックでURL更新
(function () {
  document.querySelectorAll('[data-bnto-hashaccordion]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    var items = Array.prototype.slice.call(group.querySelectorAll('.it'));
    function setItem(item, open) {
      item.classList.toggle('is-open', open);
      item.querySelector('.hd').setAttribute('aria-expanded', open);
    }
    function openById(id, scroll) {
      items.forEach(function (item) {
        if (item.id === id) {
          setItem(item, true);
          if (scroll) item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
      });
    }
    items.forEach(function (item) {
      var head = item.querySelector('.hd');
      head.setAttribute('aria-expanded', item.classList.contains('is-open'));
      head.addEventListener('click', function () {
        var open = !item.classList.contains('is-open');
        setItem(item, open);
        // 開いた項目の #id をURLへ反映（履歴は増やさない）
        if (open && item.id) history.replaceState(null, '', '#' + item.id);
      });
    });
    // #id 付きURLで開かれたら、該当項目を開いてスクロール
    if (location.hash) openById(location.hash.slice(1), true);
    window.addEventListener('hashchange', function () {
      openById(location.hash.slice(1), true);
    });
    // デモ用の疑似リンク（本番では <a href="#id"> だけでOK）
    group.querySelectorAll('.jp').forEach(function (btn) {
      btn.addEventListener('click', function () {
        openById(btn.dataset.target, true);
        history.replaceState(null, '', '#' + btn.dataset.target);
      });
    });
  });
})();

使い方のコツ

「FAQのこの項目を見て」と#付きURLで直接共有できるのがポイントです。id は #faq-post のように意味の分かる名前にし、ページ内の他の要素と重複しないようにしてください。URLの書き換えには history.replaceState を使っているので、開閉のたびにブラウザ履歴が増えることはありません。

JSアコーディオン実装の基礎知識

アコーディオンは、クリックでコンテンツを開閉して限られたスペースに情報を整理する定番UIです。FAQ・料金プランの詳細・スペック表など「全員には不要だが、必要な人には見せたい」情報と相性が抜群です。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもフレームワークも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

開閉アニメーションの仕組み（height:autoのアニメ問題）

CSSは height: auto へのアニメーションができないため、従来は中身の高さをJSで測る必要がありました。このページでは grid-template-rows: 0fr → 1fr を使うモダンな手法を採用しています。高さの計測が一切不要で、中身が画像や可変テキストでもなめらかに動きます。

アクセシビリティのポイント

見出しには必ず <button> を使うこと（divのclickだけではキーボードで操作できません）。開閉状態は aria-expanded で支援技術に伝えます。サンプルはどちらも実装済みです。セマンティクスを最優先するなら、ブラウザ標準の <details>/<summary> 版も用意しています。

SEOとの関係

アコーディオンで隠したコンテンツも、HTMLとして存在していればGoogleにインデックスされます（display:noneでもモバイルファーストインデックスでは評価対象）。FAQを実装する場合、FAQPage 構造化データを付けること自体に問題はありませんが、検索結果でのQ&A表示（リッチリザルト）は現在、政府機関・医療系など一部のサイトに限定されている点は知っておくと安心です。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたアコーディオンはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

開閉のなめらかなアニメーションはどう実現していますか？

CSS Grid の grid-template-rows を 0fr から 1fr へ変化させる方法を使っています。中身の高さをJavaScriptで測る必要がなく、可変コンテンツでもなめらかに開閉します。

アクセシビリティには対応していますか？

見出しは button 要素なのでキーボード（Enter / Space）で操作でき、開閉状態は aria-expanded 属性でスクリーンリーダーに伝わります。details/summary 版はブラウザ標準のセマンティクスをそのまま使えます。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「排他式（1つだけ開く）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

JSアコーディオン実装 12選

ベーシック

排他式（1つだけ開く）

FAQ（よくある質問）

プラス→バツ

塗りつぶしヘッダー

カード分離型

左ライン点灯

details/summary（JS不要）

一括開閉ボタン付き

検索で絞り込めるFAQ

入れ子アコーディオン

ハッシュ連動アコーディオン

JSアコーディオン実装の基礎知識

開閉アニメーションの仕組み（height:autoのアニメ問題）

アクセシビリティのポイント

SEOとの関係

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ