61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T8475,import { createElement, useEffect, useId, useMemo, useRef, useState } from "react"; import type { ReactNode } from "react"; /* ---------- one tree, two outputs ---------- Every piece is written once as a small tree of elements. The same tree renders the live preview and the HTML you copy, so the code you take is the code you saw working. "&" in a class, id or CSS rule is replaced with the piece's own class name. */ type Attrs = Record; type El = { t: string; a: Attrs; k: HNode[] }; type HNode = string | El; type Kid = HNode | (HNode | null | undefined)[] | null | false | undefined; function h(t: string, a: Attrs = {}, ...k: Kid[]): El { const kids: HNode[] = []; for (const x of k) { if (x === null || x === false || x === undefined) continue; if (Array.isArray(x)) kids.push(...x.filter((y) => y !== null && y !== undefined)); else kids.push(x); } return { t, a, k: kids }; } const sc = (s: string, name: string) => s.replace(/&/g, name); const esc = (s: string) => s.replace(//g, ">"); const SVG_SELF = new Set(["path", "circle", "line", "rect", "polyline"]); function attrStr(a: Attrs, name: string): string { return Object.entries(a) .filter(([, v]) => v !== undefined && v !== false) .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${sc(String(v), name)}"`)) .join(""); } function toHtml(n: HNode, name: string, d = 0): string { const pad = " ".repeat(d); if (typeof n === "string") return pad + esc(n); const open = `<${n.t}${attrStr(n.a, name)}`; if (SVG_SELF.has(n.t)) return `${pad}${open} />`; if (n.t === "input") return `${pad}${open}>`; if (!n.k.length) return `${pad}${open}>`; if (n.k.every((c) => typeof c === "string")) return `${pad}${open}>${n.k.map((c) => esc(c as string)).join("")}`; return `${pad}${open}>\n${n.k.map((c) => toHtml(c, name, d + 1)).join("\n")}\n${pad}`; } const RMAP: Record = { class: "className", for: "htmlFor", tabindex: "tabIndex", checked: "defaultChecked", "stroke-width": "strokeWidth", "stroke-linecap": "strokeLinecap", "stroke-linejoin": "strokeLinejoin", }; function toReact(n: HNode, name: string, key?: number): ReactNode { if (typeof n === "string") return n; const p: Record = { key }; for (const [k, v] of Object.entries(n.a)) { if (v === undefined || v === false) continue; p[RMAP[k] ?? k] = v === true ? (k.startsWith("aria-") || k.startsWith("data-") ? "" : true) : sc(String(v), name); } return createElement(n.t, p, ...n.k.map((c, i) => toReact(c, name, i))); } /* ---------- copy helpers and shared UI ---------- */ async function copyText(text: string): Promise { try { await navigator.clipboard.writeText(text); return true; } catch { return false; } } const ICON_COPY = "M9 9h11v11H9zM5 15H4V4h11v1"; const ICON_CHECK = "M5 12.5l4.5 4.5L19 7"; const ICON_CODE = "M8 7l-5 5 5 5M16 7l5 5-5 5"; function Svg({ d, className = "h-4 w-4" }: { d: string; className?: string }) { return ( ); } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; /** A live piece with its own Show code and Copy buttons. */ function Card({ id, name, note, code, copyLabel, stage, stageClass, wide, ring, onAnnounce, }: { id: string; name: string; note?: string; code: string; copyLabel: string; stage: ReactNode; stageClass: string; wide?: boolean; ring: string; onAnnounce: (s: string) => void; }) { const [open, setOpen] = useState(false); const [copied, setCopied] = useState(false); const timer = useRef | null>(null); useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []); async function copy() { const ok = await copyText(code); if (!ok) setOpen(true); setCopied(ok); onAnnounce(ok ? `${name}: ${copyLabel} copied` : "Copy was blocked, the code is shown so you can select it"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(false), 1600); } return (

{stage}

{name}

{note &&

{note}

}

{open && (

          {code}

)}

); } /** The view switcher at the top of each collection. */ function Views({ views, value, onChange, ring, label }: { views: [T, string, number?][]; value: T; onChange: (v: T) => void; ring: string; label: string }) { return (

{views.map(([k, text, n]) => { const on = value === k; return ( ); })}

); } /** A block of source code with one Copy button, used for the React + Tailwind versions. */ function CodeBlock({ code, label, ring, onAnnounce, id }: { code: string; label: string; ring: string; onAnnounce: (s: string) => void; id: string }) { const [copied, setCopied] = useState(false); const [show, setShow] = useState(true); async function copy() { const ok = await copyText(code); setCopied(ok); if (!ok) setShow(true); onAnnounce(ok ? `${label} copied` : "Copy was blocked, the code is shown so you can select it"); setTimeout(() => setCopied(false), 1600); } return (

{label}

{show && (

          {code}

)}

); } const SECTION_FONT = { fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif' }; /* ---------- accordions ---------- */ type QA = [string, string]; type AItem = { name: string; cls: string; note: string; tech: "details" | "aria"; qa: QA[]; css: string; exclusive?: boolean; numbered?: boolean; icon: "chevron" | "plus" | "none" }; const RM = `@media (prefers-reduced-motion: reduce) { .& *, .& *::before, .& *::after, .& ::details-content { transition-duration: .01ms !important; } }`; const SUMMARY_RESET = `.&__q { list-style: none; cursor: pointer; } .&__q::-webkit-details-marker { display: none; } .&__q:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }`; const chevron = () => h("svg", { class: "&__icon", viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M6 9l6 6 6-6" })); const plus = () => h("span", { class: "&__icon", "aria-hidden": "true" }); const ACCS: AItem[] = [ { name: "Plain details", cls: "faq-plain", note: "Native details and summary, rotating chevron", tech: "details", icon: "chevron", qa: [ ["How long is the beginner wheel course?", "Six Tuesday evenings, two hours each. You will throw, trim and glaze at least four pieces by the end."], ["Do I need to bring anything?", "Clothes you do not mind getting muddy. Aprons, tools and clay are included in the course price."], ["Can I keep everything I make?", "Yes. Pieces are fired twice, so allow two weeks after the last session to collect them."], ["What if I miss a session?", "Join the Thursday group that week instead. There is room for two catch-up places in each class."], ], css: `.& { max-width: 640px; font: 15px/1.55 system-ui, sans-serif; color: #1c1917; } ${SUMMARY_RESET} .&__item { border-bottom: 1px solid #e7e5e4; } .&__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; font-weight: 600; } .&__icon { flex: none; color: #78716c; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .&__item[open] .&__icon { transform: rotate(180deg); } .&__a { margin: 0; padding: 0 2px 16px; color: #57534e; } ${RM}`, }, { name: "Cards with plus and minus", cls: "faq-cards", note: "Each question is its own card; the plus folds into a minus", tech: "details", icon: "plus", qa: [ ["When will my order arrive?", "Orders placed before 2pm on a weekday leave the same day and usually arrive in two to three working days."], ["Can I change the delivery address?", "Yes, until the parcel is packed. Reply to your order email and we will update it."], ["How do returns work?", "Start a return from your account within 30 days. The prepaid label goes on the original box."], ], css: `.& { display: grid; gap: 10px; max-width: 640px; font: 15px/1.55 system-ui, sans-serif; color: #0f172a; } ${SUMMARY_RESET} .&__item { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; } .&__item[open] { border-color: #cbd5e1; box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .25); } .&__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; font-weight: 600; } .&__icon { position: relative; flex: none; width: 14px; height: 14px; } .&__icon::before, .&__icon::after { content: ""; position: absolute; top: 6px; left: 0; width: 14px; height: 2px; border-radius: 2px; background: #334155; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .&__icon::after { transform: rotate(90deg); } .&__item[open] .&__icon::after { transform: rotate(0deg); } .&__a { margin: 0; padding: 0 18px 18px; color: #475569; } ${RM}`, }, { name: "One open at a time", cls: "faq-exclusive", note: "details with a shared name attribute, no JavaScript", tech: "details", icon: "chevron", exclusive: true, qa: [ ["What is included in the Studio plan?", "Ten editors, unlimited projects, version history for a year and priority email support."], ["Can I switch plans later?", "Any time. Upgrades apply straight away and downgrades take effect at the end of the billing period."], ["Do you offer a discount for charities?", "Registered charities get the Studio plan at half price. Write to us with your registration number."], ["Is there a free trial?", "Every plan starts with 14 days free, and no card is needed to begin."], ], css: `.& { max-width: 640px; padding: 6px 18px; border-radius: 16px; background: #f5f3ff; font: 15px/1.55 system-ui, sans-serif; color: #1e1b4b; } ${SUMMARY_RESET} .&__item + .&__item { border-top: 1px solid #ddd6fe; } .&__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; } .&__item[open] .&__q { color: #5b21b6; } .&__icon { flex: none; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .&__item[open] .&__icon { transform: rotate(180deg); } .&__a { margin: 0; padding: 0 0 16px; color: #3b3a5c; } ${RM}`, }, { name: "Smooth height details", cls: "faq-smooth", note: "Animates open with ::details-content where supported", tech: "details", icon: "chevron", qa: [ ["How many guests does the barn hold?", "Up to 120 seated for dinner, or 180 standing. The courtyard adds room for drinks outside in summer."], ["Can we bring our own caterer?", "Yes, from our list of approved caterers, or your own if they hold the right food safety certificate."], ["What time does music have to stop?", "Amplified music ends at 11pm. Acoustic sets in the courtyard can carry on until midnight."], ], css: `.& { max-width: 640px; border-top: 2px solid #1c1917; font: 15px/1.55 system-ui, sans-serif; color: #1c1917; } ${SUMMARY_RESET} .&__item { border-bottom: 1px solid #d6d3d1; } .&__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .&__icon { flex: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .&__item[open] .&__icon { transform: rotate(180deg); } .&__a { margin: 0; padding: 0 0 18px; color: #57534e; } @supports (interpolate-size: allow-keywords) { .& { interpolate-size: allow-keywords; } .&__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete; } .&__item[open]::details-content { block-size: auto; } } ${RM}`, }, { name: "ARIA accordion", cls: "faq-aria", note: "Buttons in headings, aria-expanded, animated with grid rows", tech: "aria", icon: "chevron", qa: [ ["How long does a full service take?", "Drop the bike off before 10am and it is usually ready the same afternoon. We text you when it is done."], ["Do you fix electric bikes?", "Yes, everything except the battery cells. Motor and display faults go to the maker under warranty."], ["Can I wait while you fix a puncture?", "Most punctures take twenty minutes. There is coffee and a bench by the window."], ], css: `.& { max-width: 640px; border: 1px solid #d6d3d1; border-radius: 16px; background: #fff; overflow: hidden; font: 15px/1.55 system-ui, sans-serif; color: #1c1917; } .&__heading { margin: 0; font: inherit; } .&__panel + .&__heading { border-top: 1px solid #e7e5e4; } .&__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 18px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .&__trigger:hover { background: #fafaf9; } .&__trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; } .&__icon { flex: none; color: #b45309; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .&__trigger[aria-expanded="true"] .&__icon { transform: rotate(180deg); } .&__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1); } .&__panel[data-open] { grid-template-rows: 1fr; } .&__inner { overflow: hidden; visibility: hidden; transition: visibility 0s .3s; } .&__panel[data-open] .&__inner { visibility: visible; transition: visibility 0s; } .&__a { margin: 0; padding: 0 18px 18px; color: #57534e; } ${RM}`, }, { name: "Numbered, dark", cls: "faq-numbered", note: "details on a dark panel with large numerals", tech: "details", icon: "plus", numbered: true, qa: [ ["Where is the conference held?", "In the old wool exchange by the canal, a ten minute walk from the main station."], ["Are talks recorded?", "Every main stage talk is filmed and sent to ticket holders within a week."], ["Can I transfer my ticket?", "Yes, to a colleague, free of charge, until the Friday before the event."], ], css: `.& { max-width: 640px; padding: 8px 22px; border-radius: 18px; background: #111318; counter-reset: q; font: 15px/1.55 system-ui, sans-serif; color: #e7e5e4; } ${SUMMARY_RESET} .&__q:focus-visible { outline-color: #93c5fd; } .&__item + .&__item { border-top: 1px solid rgba(255, 255, 255, .1); } .&__q { display: flex; align-items: center; gap: 16px; padding: 16px 0; color: #fafaf9; font-weight: 600; } .&__q::before { counter-increment: q; content: counter(q, decimal-leading-zero); flex: none; width: 28px; color: #a8a29e; font: 500 13px/1 ui-monospace, monospace; } .&__item[open] .&__q::before { color: #fbbf24; } .&__icon { position: relative; flex: none; width: 12px; height: 12px; margin-left: auto; } .&__icon::before, .&__icon::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 2px; background: #d6d3d1; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .&__icon::after { transform: rotate(90deg); } .&__item[open] .&__icon::after { transform: rotate(0deg); } .&__a { margin: 0; padding: 0 0 18px 44px; color: #d6d3d1; } ${RM}`, }, ]; function accTree(it: AItem): El { if (it.tech === "aria") { return h( "div", { class: "&" }, it.qa.flatMap(([q, a], i) => [ h("h3", { class: "&__heading" }, h("button", { class: "&__trigger", type: "button", id: `&-q${i + 1}`, "aria-expanded": i === 0 ? "true" : "false", "aria-controls": `&-a${i + 1}` }, h("span", {}, q), chevron())), h("div", { class: "&__panel", id: `&-a${i + 1}`, role: "region", "aria-labelledby": `&-q${i + 1}`, "data-open": i === 0 ? "" : undefined }, h("div", { class: "&__inner" }, h("p", { class: "&__a" }, a))), ]), ); } return h( "div", { class: "&" }, it.qa.map(([q, a], i) => h( "details", { class: "&__item", name: it.exclusive ? "&" : undefined, open: i === 0 || undefined }, h("summary", { class: "&__q" }, h("span", {}, q), it.icon === "plus" ? plus() : chevron()), h("p", { class: "&__a" }, a), ), ), ); } const ACC_JS = ` // Opens and closes each panel and keeps aria-expanded in step with it. document.querySelectorAll(".& .&__trigger").forEach(function (button) { button.addEventListener("click", function () { var open = button.getAttribute("aria-expanded") !== "true"; button.setAttribute("aria-expanded", String(open)); document.getElementById(button.getAttribute("aria-controls")).toggleAttribute("data-open", open); }); });`; function attachAcc(root: HTMLElement): () => void { const buttons = Array.from(root.querySelectorAll("button[aria-controls]")); const offs = buttons.map((button) => { const onClick = () => { const open = button.getAttribute("aria-expanded") !== "true"; button.setAttribute("aria-expanded", String(open)); root.querySelector(`#${button.getAttribute("aria-controls")}`)?.toggleAttribute("data-open", open); }; button.addEventListener("click", onClick); return () => button.removeEventListener("click", onClick); }); return () => offs.forEach((f) => f()); } const accCode = (it: AItem) => `\n${toHtml(accTree(it), it.cls)}\n\n\n` + (it.tech === "aria" ? `\n\n` : ""); /* ---------- FAQ structured data ---------- */ const SCHEMA_ORG = "https:/" + "/schema.org"; function faqJsonLd(qa: QA[]): string { const data = { "@context": SCHEMA_ORG, "@type": "FAQPage", mainEntity: qa.map(([q, a]) => ({ "@type": "Question", name: q, acceptedAnswer: { "@type": "Answer", text: a } })), }; return `\n`; } /* ---------- React + Tailwind version (the code below is this exact component) ---------- */ type FaqItem = { question: string; answer: string }; function Accordion({ items, multiple = false, defaultOpen = [0] }: { items: FaqItem[]; multiple?: boolean; defaultOpen?: number[] }) { const base = useId(); const [open, setOpen] = useState(defaultOpen); function toggle(i: number) { setOpen((cur) => (cur.includes(i) ? cur.filter((x) => x !== i) : multiple ? [...cur, i] : [i])); } return (

{items.map((item, i) => { const isOpen = open.includes(i); return (

{item.answer}

); })}

); } const REACT_CODE = `import { useId, useState } from "react"; type FaqItem = { question: string; answer: string }; export function Accordion({ items, multiple = false, defaultOpen = [0] }: { items: FaqItem[]; multiple?: boolean; defaultOpen?: number[] }) { const base = useId(); const [open, setOpen] = useState(defaultOpen); function toggle(i: number) { setOpen((cur) => (cur.includes(i) ? cur.filter((x) => x !== i) : multiple ? [...cur, i] : [i])); } return (

{items.map((item, i) => { const isOpen = open.includes(i); return (

{item.answer}

); })}

); } // Usage // // `; const DEMO_FAQ: FaqItem[] = [ { question: "How do I book a tasting?", answer: "Pick a date on the bookings page. Tastings run Thursday to Sunday and last about ninety minutes." }, { question: "Can children come along?", answer: "Under-18s are welcome in the garden and get a juice flight of their own while the adults taste." }, { question: "Is the cellar step-free?", answer: "Yes. A lift goes down to the cellar and there is a level path from the car park." }, ]; const COMPARE: [string, string, string][] = [ ["JavaScript", "None", "A few lines per page"], ["Announced as", "A summary that screen readers report as expanded or collapsed", "A button with aria-expanded, inside a heading"], ["Headings", "A heading placed inside summary may not be announced as a heading", "Each question can be a real h2 or h3"], ["Find in page", "Chromium-based browsers open a closed details to show a match", "Hidden text is not searchable"], ["One open at a time", "Give every details the same name attribute", "Close the others in the click handler"], ["Animated height", "Only where interpolate-size and ::details-content are supported", "Works widely with grid-template-rows"], ]; type View = "html" | "react" | "schema"; export default function AccordionCollection() { const [view, setView] = useState("html"); const [announce, setAnnounce] = useState(""); const gridRef = useRef(null); const styleSheet = useMemo(() => ACCS.map((it, i) => sc(it.css, `acx${i}`)).join("\n"), []); const codes = useMemo(() => ACCS.map(accCode), []); const jsonLd = useMemo(() => faqJsonLd(ACCS[0].qa), []); useEffect(() => { const grid = gridRef.current; if (!grid) return; const offs: (() => void)[] = []; ACCS.forEach((it, i) => { if (it.tech !== "aria") return; const el = grid.querySelector(`.acx${i}`); if (el) offs.push(attachAcc(el)); }); return () => offs.forEach((f) => f()); }, [view]); const ring = "focus-visible:ring-amber-700 focus-visible:ring-offset-[#fbfaf7]"; return (

details and summary · ARIA · React

Accordions from native HTML up to React

Five accordions built on the details element, styled past the default triangle, and one ARIA accordion that animates its height in every current browser. A React and Tailwind version and a FAQ structured data helper sit in the other tabs.

{announce}

{view === "html" && (

))}

)} {view === "react" && (

Pass multiple to let several answers stay open, and defaultOpen to choose which start open.

)} {view === "schema" && (

FAQPage structured data

This is the JSON-LD for the first accordion on this page, built from its questions and answers. Paste it into the page that shows those same questions. Mark up only text that is visible on the page, word for word.

Since 2023 Google shows FAQ rich results mainly for well-known government and health sites, so for most sites the markup describes the content rather than changing how the result looks.

{COMPARE.map((r) => ( ))}

details and summary compared with an ARIA accordion
Property	details and summary	ARIA accordion
{r[0]}	{r[1]}	{r[2]}

)}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L61",null,{"files":[{"path":"components/we-inc/accordion-collection-with-styled-details-summary-aria-and-react-plus-faq-schema.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

toggle(i)} className="flex w-full items-center justify-between gap-4 rounded-2xl px-5 py-4 text-left text-[15px] font-semibold text-stone-900 hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-amber-600" > {item.question}

toggle(i)} className="flex w-full items-center justify-between gap-4 rounded-2xl px-5 py-4 text-left text-[15px] font-semibold text-stone-900 hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-amber-600" > {item.question}

FAQPage structured data