Accordion list

Build an FAQ accordion with Tailwind CSS using native <details>/<summary> elements so it works without JavaScript. Each item is a bordered row with a question in the summary, a rotating chevron via marker or a span, and an answer paragraph that reveals on open. Stack items with dividers inside a max-w-2xl column and a heading on top. Then layer on optional JavaScript that turns it into a true accordion: when one item opens, close whichever one was open, so only a single answer shows at a time. Everything still works with the script removed — that is the point of building on details.

<section class="mx-auto max-w-2xl px-6 py-16">
  <h2 class="mb-8 text-center text-3xl font-semibold text-neutral-900">Frequently asked questions</h2>
  <div id="faq" class="divide-y divide-neutral-200 rounded-2xl border border-neutral-200 bg-white">
    <details class="group p-5" open>
      <summary class="flex cursor-pointer items-center justify-between text-sm font-medium text-neutral-900 [&::-webkit-details-marker]:hidden">
        Can I cancel anytime?
        <span class="transition group-open:rotate-45 text-neutral-400">+</span>
      </summary>
      <p class="mt-3 text-sm text-neutral-500">Yes. You can cancel your subscription at any time from your billing settings — no phone calls, no retention hoops.</p>
    </details>
    <details class="group p-5">
      <summary class="flex cursor-pointer items-center justify-between text-sm font-medium text-neutral-900 [&::-webkit-details-marker]:hidden">
        Do you offer a free trial?
        <span class="transition group-open:rotate-45 text-neutral-400">+</span>
      </summary>
      <p class="mt-3 text-sm text-neutral-500">Every paid plan starts with a 14-day free trial. No credit card required to begin.</p>
    </details>
    <details class="group p-5">
      <summary class="flex cursor-pointer items-center justify-between text-sm font-medium text-neutral-900 [&::-webkit-details-marker]:hidden">
        Is my data secure?
        <span class="transition group-open:rotate-45 text-neutral-400">+</span>
      </summary>
      <p class="mt-3 text-sm text-neutral-500">We're SOC 2 Type II compliant and encrypt data in transit and at rest.</p>
    </details>
  </div>
</section>

// Progressive enhancement: the markup is already usable, this only enforces
// "one answer at a time". Remove the script and you still have a working FAQ.
var items = [].slice.call(document.querySelectorAll("#faq details"));

items.forEach(function (item) {
  item.addEventListener("toggle", function () {
    if (!item.open) return;
    items.forEach(function (other) {
      if (other !== item) other.open = false;
    });
  });
});