アコーディオンとは

見出しをクリックすると、その下の内容が開いたり閉じたりするパネル。

概要

見出し部分をクリックすると、その下にある本文が開閉するパーツです。蛇腹（じゃばら）状の楽器アコーディオンが伸び縮みする様子に見た目が似ていることから名付けられました。長い内容を折りたたんでおけるので、 FAQ（よくある質問）ページなど、複数の項目をコンパクトに並べたいときによく使われます。

別名

表記ゆれ：アコーディオン、アコーディオンメニュー、FAQ アコーディオン、開閉パネル、折りたたみ、accordion

FAQ ページで使われることが多いため「FAQ アコーディオン」と呼ばれることもあります。

AI への伝え方

「アコーディオンを実装して」で通じます。複数開けるか、1 つ開いたら他は自動で閉じるかは仕様が分かれる点なので、「複数同時に開けるようにして」のように伝えると誤解がありません。

似たパーツとの違い

似た部品に「タブ」があります。タブは切り替えて 1 つずつしか表示しない（他の内容は完全に隠れる）のに対し、アコーディオンは複数の項目を同時に開いたまま並べられる点が異なります。

デモ

全国一律 500 円です。5,000 円以上のご注文で送料無料になります。

コード

HTML

<div class="accordion-demo">
  <div class="accordion-demo__item">
    <h3 class="accordion-demo__heading">
      <button class="accordion-demo__trigger" type="button" aria-expanded="true" aria-controls="ac-panel-1">
        送料はいくらですか？
      </button>
    </h3>
    <div class="accordion-demo__panel" id="ac-panel-1">
      <p>全国一律 500 円です。5,000 円以上のご注文で送料無料になります。</p>
    </div>
  </div>
  <div class="accordion-demo__item">
    <h3 class="accordion-demo__heading">
      <button class="accordion-demo__trigger" type="button" aria-expanded="false" aria-controls="ac-panel-2">
        返品はできますか？
      </button>
    </h3>
    <div class="accordion-demo__panel" id="ac-panel-2" hidden>
      <p>商品到着から 7 日以内であれば返品を承ります。</p>
    </div>
  </div>
</div>

CSS

.accordion-demo {
  font-family: sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-demo__heading {
  margin: 0;
}

.accordion-demo__item + .accordion-demo__item {
  border-top: 1px solid #ddd;
}

.accordion-demo__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 0;
  background: #fff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.accordion-demo__trigger:hover {
  background: #fafafa;
}

.accordion-demo__trigger::after {
  content: "+";
  font-size: 18px;
  color: #666;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.15s ease;
}

.accordion-demo__trigger[aria-expanded="true"]::after {
  content: "−";
}

.accordion-demo__panel {
  padding: 0 16px 16px;
  background: #fff;
}

.accordion-demo__panel p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

document.querySelectorAll(".accordion-demo__trigger").forEach((trigger) => {
  trigger.addEventListener("click", () => {
    const panel = document.getElementById(trigger.getAttribute("aria-controls"));
    const isOpen = trigger.getAttribute("aria-expanded") === "true";
    trigger.setAttribute("aria-expanded", String(!isOpen));
    if (panel) panel.hidden = isOpen;
  });
});