FAQ Accordion

Frequently asked questions in expandable sections.

html

<div class="faq faq--comfortable">
  <details class="faq__item" open>
    <summary class="faq__q" style="--accent:#F5C2E0;">Can I cancel at any time?</summary>
    <p class="faq__a">Yes, cancel from your account settings and you&#39;ll keep access until the period ends.</p>
  </details>
  <details class="faq__item">
    <summary class="faq__q" style="--accent:#F5C2E0;">Do you offer refunds?</summary>
    <p class="faq__a">Yes, within 30 days of purchase, no questions asked.</p>
  </details>
  <details class="faq__item">
    <summary class="faq__q" style="--accent:#F5C2E0;">Is there a free trial?</summary>
    <p class="faq__a">Every plan includes a 14-day trial, no card required.</p>
  </details>
</div>
<style>
.faq { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 480px; border-top: 1px solid #24143018; }
.faq__item { border-bottom: 1px solid #24143018; }
.faq__q { list-style: none; cursor: pointer; padding: 16px 4px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.faq--compact .faq__q { padding: 10px 4px; font-size: 14px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--accent); font-size: 18px; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq__a { margin: 0 0 16px; font-size: 14px; color: #241430cc; }
.faq--compact .faq__a { margin-bottom: 10px; font-size: 13px; }
</style>

tailwind

<div class="faq-tw faq-tw--comfortable font-sans text-[#241430] max-w-[480px] border-t border-[#24143018]">
  <details class="faq-tw__item border-b border-[#24143018]" open>
    <summary class="faq-tw__q list-none cursor-pointer py-4 px-1 font-semibold flex items-center justify-between marker:hidden" style="--accent:#F5C2E0;">
      Can I cancel at any time?<span aria-hidden="true" style="color:#F5C2E0;">+</span>
    </summary>
    <p class="faq-tw__a m-0 mb-4 text-sm text-[#241430]/80">Yes, cancel from your account settings and you&#39;ll keep access until the period ends.</p>
  </details>
  <details class="faq-tw__item border-b border-[#24143018]">
    <summary class="faq-tw__q list-none cursor-pointer py-4 px-1 font-semibold flex items-center justify-between marker:hidden">
      Do you offer refunds?<span aria-hidden="true" style="color:#F5C2E0;">+</span>
    </summary>
    <p class="faq-tw__a m-0 mb-4 text-sm text-[#241430]/80">Yes, within 30 days of purchase, no questions asked.</p>
  </details>
  <details class="faq-tw__item border-b border-[#24143018]">
    <summary class="faq-tw__q list-none cursor-pointer py-4 px-1 font-semibold flex items-center justify-between marker:hidden">
      Is there a free trial?<span aria-hidden="true" style="color:#F5C2E0;">+</span>
    </summary>
    <p class="faq-tw__a m-0 mb-4 text-sm text-[#241430]/80">Every plan includes a 14-day trial, no card required.</p>
  </details>
</div>
<style>
.faq-tw--compact .faq-tw__q { padding: 10px 4px; font-size: 14px; }
.faq-tw--compact .faq-tw__a { margin-bottom: 10px; font-size: 13px; }
</style>

react

import { useState } from "react";

export function FaqAccordion({
  question = "Can I cancel at any time?",
  answer = "Yes, cancel from your account settings and you'll keep access until the period ends.",
  density = "comfortable",
  accent = "#F5C2E0",
  firstOpen = true,
}) {
  const items = [
    { q: question, a: answer, open: firstOpen },
    { q: "Do you offer refunds?", a: "Yes, within 30 days of purchase, no questions asked.", open: false },
    { q: "Is there a free trial?", a: "Every plan includes a 14-day trial, no card required.", open: false },
  ];
  const [openIndex, setOpenIndex] = useState(items.findIndex((i) => i.open));
  const pad = density === "compact" ? "10px 4px" : "16px 4px";
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 480, borderTop: "1px solid #24143018" }}>
      {items.map((item, i) => (
        <div key={item.q} style={{ borderBottom: "1px solid #24143018" }}>
          <button type="button" onClick={() => setOpenIndex(openIndex === i ? -1 : i)} style={{
            width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: pad,
            fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "space-between", color: "inherit", font: "inherit" }}>
            {item.q}
            <span aria-hidden="true" style={{ color: accent }}>{openIndex === i ? "\u2212" : "+"}</span>
          </button>
          {openIndex === i && (
            <p style={{ margin: density === "compact" ? "0 0 10px" : "0 0 16px", fontSize: density === "compact" ? 13 : 14, color: "#241430cc" }}>{item.a}</p>
          )}
        </div>
      ))}
    </div>
  );
}