【Next.js】FAQ アコーディオンメニューの作り方を開閉アニメーションまで解説

const items = [
    { q: "無料で試せますか？", a: "14日間はすべての機能を無料で使えます。カードの登録は不要です。" },
    { q: "解約はいつでもできますか？", a: "設定画面からいつでも解約できます。次の請求日以降は課金されません。" },
    { q: "請求書払いに対応していますか？", a: "Team プランのみ対応しています。お問い合わせからご相談ください。" },
  ];

  export function Faq() {
    return (
      <section className="mx-auto max-w-2xl px-6 py-24">
        <h2 className="text-3xl font-semibold">よくある質問</h2>
        <div className="mt-10 divide-y divide-zinc-200 border-y border-zinc-200">
          {items.map((item) => (
            <details key={item.q} className="group py-2">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-3 font-medium [&::-webkit-details-marker]:hidden">
                {item.q}
                <span aria-hidden="true" className="transition-transform group-open:rotate-45">+</span>
              </summary>
              <p className="pb-3 text-sm leading-relaxed text-zinc-600">{item.a}</p>
            </details>
          ))}
        </div>
      </section>
    );
  }

"use client";

  import { useId, useState } from "react";

  type Item = { q: string; a: string };

  export function FaqAccordion({ items }: { items: Item[] }) {
    const [open, setOpen] = useState<number | null>(0); // 最初の1問だけ開いておく
    const baseId = useId();

    return (
      <div className="divide-y divide-zinc-200 border-y border-zinc-200">
        {items.map((item, i) => {
          const isOpen = open === i;
          const buttonId = baseId + "-q-" + i;
          const panelId = baseId + "-a-" + i;
          return (
            <div key={item.q}>
              <h3>
                <button
                  id={buttonId}
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpen(isOpen ? null : i)}
                  className="flex min-h-11 w-full items-center justify-between gap-4 py-4 text-left font-medium"
                >
                  {item.q}
                  <span
                    aria-hidden="true"
                    className={"transition-transform duration-300 " + (isOpen ? "rotate-45" : "")}
                  >
                    +
                  </span>
                </button>
              </h3>
              <div
                id={panelId}
                role="region"
                aria-labelledby={buttonId}
                inert={!isOpen}
                className={
                  "grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none " +
                  (isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]")
                }
              >
                <div className="overflow-hidden">
                  <p className="pb-4 text-sm leading-relaxed text-zinc-600">{item.a}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

type Item = { q: string; a: string };

  export function FaqJsonLd({ items }: { items: Item[] }) {
    const jsonLd = {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: items.map((item) => ({
        "@type": "Question",
        name: item.q,
        acceptedAnswer: { "@type": "Answer", text: item.a },
      })),
    };

    return (
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
    );
  }