FAQアコーディオン

LPの節 ／ パターン集トップ

details/summaryのFAQ 5問。開閉はJSなしで動く

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="faq page" id="faq" aria-labelledby="faq-title">
  <h2 id="faq-title">よくある質問</h2>
  <details class="faq__item">
    <summary>席の予約はできますか</summary>
    <p>席の予約は受け付けていません。豆の取り置きは前日までにお知らせください。</p>
  </details>
  <details class="faq__item">
    <summary>駐車場はありますか</summary>
    <p>店の裏に2台分あります。満車のときは向かいのコインパーキングをご利用ください。</p>
  </details>
  <details class="faq__item">
    <summary>豆だけの購入はできますか</summary>
    <p>できます。100gから量り売りし、挽き方もその場で選べます。</p>
  </details>
  <details class="faq__item">
    <summary>閉店後に受け取れますか</summary>
    <p>18時までにご連絡いただければ、19時まで店頭でお渡しできます。</p>
  </details>
  <details class="faq__item">
    <summary>テイクアウトはできますか</summary>
    <p>全てのドリンクをお持ち帰りいただけます。カップの持ち込みもどうぞ。</p>
  </details>
</section>

.faq__item {
  border-block-end: 1px solid var(--color-border);
}
.faq__item:first-of-type {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--space-5);
}
.faq__item summary {
  list-style: none;                 /* 既定の三角を消す */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 700;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "＋";
  flex: none;
  color: var(--color-accent-text);
  transition: rotate var(--dur-fast) var(--ease-out);
}
.faq__item[open] summary::after {
  rotate: 45deg;                    /* ＋を回して×にする。contentの差し替えはしない */
}
.faq__item p {
  margin: 0;
  padding-block-end: var(--space-4);
  color: var(--color-text-muted);
}

確認する#

• summary を div とJSで作り直していない（キーボードは素の機能で動く）
• 開閉アイコンは [open] と連動している（content の差し替えではなく回転）
• 質問文だけ読んでも答えの見当がつく（「その他」でまとめない）

関連#

• 4つの状態
• キーボードで使える
• 動きの基本