6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven FAQ sections: a classic accordion with plus and minus icons, an exclusive group where only one answer is open, a two-column FAQ, a searchable FAQ, questions grouped by topic, an FAQ with matching structured data and answers that open with a smooth animation.
Questions in details and summary elements, each with a plus that turns into a minus when open. The disclosure works with mouse, keyboard and screen readers without any script, and the icon is drawn with two pseudo-element bars.
View code
<div class="fq1"><details><summary>How long does delivery take?</summary><p>Two to four working days in the UK, five to eight to the rest of Europe.</p></details><details><summary>Can I return an item?</summary><p>Yes, within 30 days, unused and in its original packaging.</p></details><details><summary>Do you ship outside Europe?</summary><p>Not yet. We hope to add the US next year.</p></details></div>
Giving every details element the same name attribute makes them an exclusive group: opening one closes the others, with no JavaScript. Browsers without support simply let several stay open, which is a fine fallback.
View code
<div class="fq2"><details name="fq2" open><summary>Is there a free plan?</summary><p>Yes. Up to three projects, free forever.</p></details><details name="fq2"><summary>Can I cancel any time?</summary><p>Yes. You keep access until the end of the paid period.</p></details><details name="fq2"><summary>Do you offer discounts?</summary><p>Half price for students and non-profits.</p></details></div>
On wide containers questions sit in two columns so a long FAQ takes less scrolling; on narrow ones they stack. Each question and answer is a heading and paragraph pair, always visible, which suits short FAQs better than collapsing.
View code
<div class="fq3"><div class="in"><div><h3>Do you work with small shops?</h3><p>Yes, most of our clients have fewer than ten staff.</p></div><div><h3>How long does a project take?</h3><p>Usually four to eight weeks.</p></div><div><h3>Can you migrate my store?</h3><p>Yes, including products, customers and orders.</p></div><div><h3>Do you offer support after launch?</h3><p>Every project includes 30 days of support.</p></div></div></div>
A filter box above the questions hides the ones that do not match the typed words, searching both questions and answers. A live region reports how many questions match, and clearing the field brings them all back.
View code
<div class="fq4"><label for="fq4q">Search questions</label><input id="fq4q" type="search" placeholder="e.g. refund"><p class="n" aria-live="polite"></p><details><summary>How do refunds work?</summary><p>Refunds go back to the original card within 5 days.</p></details><details><summary>Where is my order?</summary><p>Use the tracking link in your shipping email.</p></details><details><summary>Can I change my address?</summary><p>Yes, until the order ships.</p></details></div>
var q = document.getElementById('fq4q'), ds = document.querySelectorAll('.fq4 details'), n = document.querySelector('.fq4 .n');
q.oninput = function () { var t = q.value.trim().toLowerCase(), k = 0; ds.forEach(function (d) { var hit = !t || d.textContent.toLowerCase().indexOf(t) !== -1; d.hidden = !hit; if (hit) k++; }); n.textContent = t ? (k ? k + (k === 1 ? ' question matches' : ' questions match') : 'No questions match. Try another word.') : ''; };
05. FAQ Grouped by Topic
FAQGroups
Long FAQs are easier with topic headings: Orders, Payments, Returns, each with its own questions. The topics are h3 headings so screen reader users can jump between them, and the questions under each are a details group.
View code
<div class="fq5"><h3>Payments</h3><details><summary>Which cards do you accept?</summary><p>Visa, Mastercard and American Express.</p></details><details><summary>Is there a payment plan?</summary><p>Yes, three interest-free instalments.</p></details><h3>Returns</h3><details><summary>Who pays for return postage?</summary><p>We do, using the prepaid label in your parcel.</p></details></div>
A visible FAQ paired with FAQPage JSON-LD that repeats exactly the same questions and answers. Structured data must match what is on the page, and search engines show FAQ rich results only for some kinds of sites, so treat it as a description, not a guarantee.
View code
<div class="fq6"><details><summary>What is a headless store?</summary><p>A shop whose front end is separate from the commerce platform.</p></details><details><summary>Is headless faster?</summary><p>It can be, when the front end is well built.</p></details><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is a headless store?","acceptedAnswer":{"@type":"Answer","text":"A shop whose front end is separate from the commerce platform."}},{"@type":"Question","name":"Is headless faster?","acceptedAnswer":{"@type":"Answer","text":"It can be, when the front end is well built."}}]}</script></div>
Answers open with a smooth height animation in browsers that support interpolate-size and ::details-content, and simply appear elsewhere. No script measures heights, so content can change length freely without breaking the animation.
View code
<div class="fq7"><details><summary>Why choose annual billing?</summary><p>Two months free, and one invoice a year for your accountant.</p></details><details><summary>What happens to my data if I leave?</summary><p>Export everything as CSV or JSON. We delete your account data 30 days after you close it.</p></details></div>
The native <details> and <summary> pair gives an accessible disclosure with keyboard support and no script. Style the summary freely and replace the marker with your own icon.
One open at a time
Give every details element in a group the same name attribute and the browser closes the others when one opens. Use it when answers are long; keep multiple open for short ones.
Structured data must match
FAQPage JSON-LD should repeat exactly the questions and answers visible on the page. Search engines show FAQ rich results only for some sites, so use it to describe, not to chase.
Search for long FAQs
Once an FAQ passes about ten questions, a filter box that searches questions and answers saves a lot of scrolling. Report the number of matches in a live region.
Frequently asked questions
Is details accessible?
Yes. It is announced as a disclosure that is expanded or collapsed, and works with Enter and Space.
Will closed answers be indexed?
Content inside closed details is in the HTML, and search engines can read it.
How do I animate details?
Use ::details-content with interpolate-size in supporting browsers, as the last demo does.