Guide
Accessible accordions with details and summary
FAQs, product details and help articles often use accordions: a list of headings that expand to show more. Many sites build them with JavaScript libraries, but HTML has had a native accordion for years — the details element with a summary inside. It needs no script, works with a keyboard and screen readers out of the box, and is supported by every current browser. This generator turns a list of questions and answers into ready-to-paste markup.
Writing the items
Type each question as a ## heading with its answer underneath, or as Q: and A: pairs, or as blocks separated by a blank line where the first line is the question. With Markdown answers on, the answers may use bold, links and lists, and they are sanitised so nothing unsafe is produced. Turn it off to treat answers as plain text paragraphs.
Why details and summary
The browser handles everything: clicking or pressing Enter or Space on the summary toggles the item, screen readers announce it as expandable and say whether it is open, and Ctrl+F finds text inside closed items and opens them. Because there is no script, the accordion works in pages with strict security policies, in CMS blocks that strip scripts, and before any JavaScript has loaded.
One open at a time
Give several details elements the same name attribute and the browser closes the others when one opens, like a classic exclusive accordion. It is supported in Chrome and Edge 120 and later, Safari 17.2 and Firefox 130; older browsers ignore the attribute and simply allow several open at once, which is a harmless fallback. You can also start with the first item open.
Styling
The optional CSS gives each item a border and padding, replaces the default triangle with a plus that becomes a minus when open, adds a visible focus ring for keyboard users, and switches to dark colours when the visitor’s system uses dark mode. Change the class name to avoid clashes with your site’s styles, or leave the CSS out and style it yourself.
FAQ structured data
Switch on FAQPage structured data and a JSON-LD script describing each question and answer is added. Since 2023, Google shows FAQ rich results only for well-known government and health sites, so most sites will not see a visual change in search. The markup is still valid, other search engines and assistants can read it, and it must match questions that are visible on the page.
A worked example
The sample is a three-question shop FAQ. It produces three details elements, and the delivery answer keeps “2 working days” in bold. Switching on exclusive mode adds name="faq" to each, and the structured-data option appends a FAQPage script.
Where to paste it
Use a Custom HTML block in WordPress, an HTML embed in Webflow or Squarespace, a raw HTML section in a static site, or directly in a template. Many email clients do not support details, so for email keep answers visible instead.
Related tools
Convert longer answers with Markdown to HTML, put a pricing table above the FAQ with the Comparison Table Maker, escape code examples with the HTML Encoder, or build a contents list with the Markdown TOC Generator.
Checked against the current version of the HTML Accordion Generator (No JavaScript) on .