fix: questions and answers are all open instead of an accordion

Opening one question pushed everything below it down. The answers are two or
three lines long, so they are simply shown: two columns on wide screens, one
on phones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-05 12:12:59 +02:00
co-authored by Claude Opus 5.5
parent f3797bfe47
commit 7a71296e6d
+13 -17
View File
@@ -1,26 +1,22 @@
import * as React from "react";
import type { FaqItem } from "@/src/content/types";
/**
* Faq: a handful of short questions with their answers, all open. No accordion:
* opening one pushed everything below it down (owner feedback), and with
* answers of two or three lines there is nothing worth hiding.
*/
export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (
<div className="grid grid-cols-1 gap-x-12 md:grid-cols-2">
<dl className="m-0 grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2 md:gap-y-14">
{items.map((item) => (
<details
key={item.question}
className="group border-t border-slate-200 py-6 open:pb-8"
>
<summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl [&::-webkit-details-marker]:hidden">
<div key={item.question} className="border-t border-slate-900 pt-6">
<dt className="font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
{item.question}
<span
className="mt-1 shrink-0 font-mono text-xl text-slate-400 transition-transform duration-300 group-open:rotate-45"
aria-hidden="true"
>
+
</span>
</summary>
<p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
</dt>
<dd className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
{item.answer}
</p>
</details>
</dd>
</div>
))}
</div>
</dl>
);