Build an FAQ accordion using the core Details block
A scenario prompt that turns eight support questions into native accordion entries with the Details/Summary block, flagging where it differs from a true single-open accordion.
Works with Claude / GPT1,290 uses★ 4.4
The prompt
gutenberg-faq-accordion-details-summary
I'm building an FAQ section for our shipping policy page with these questions:
1. How long does standard shipping take?
2. Do you ship internationally?
3. Can I change my address after ordering?
4. What happens if a package is lost?
5. Do you offer expedited shipping?
6. How do I track my order?
7. What's your return policy on damaged items?
8. Can I combine multiple orders into one shipment?
[replace with your own list of questions and answers]
Build this as an accordion using the core `wp:details` block (the block that
renders semantic HTML `<details>`/`<summary>`), not a custom accordion built from
Group blocks and hidden CSS classes, which typically isn't keyboard-operable out
of the box.
1. Wrap the whole FAQ list in a `wp:group` with a `wp:heading` above it ("Shipping
FAQs") so the section itself has a heading, not just eight collapsed questions
floating with no context.
2. For each question, create one `wp:details` block: the question text goes in
the block's summary, and the answer goes in a `wp:paragraph` nested inside as
the details content.
3. Flag this limitation explicitly rather than silently working around it: the
core Details block does not enforce "only one open at a time" behavior, each
entry opens and closes independently. If the client specifically wants a
single-open accordion, that requires custom JavaScript beyond what core blocks
provide, say so instead of pretending the block does something it doesn't.
4. Watch for a common validation error: content placed directly inside `wp:details`
that isn't wrapped in an inner block (a stray line of text with no `wp:paragraph`
wrapper) will throw a block validation error on save. Every answer needs its
own paragraph block.
5. Keep question text as plain text in the summary, not a heading tag nested
inside it, `<summary>` already carries the right semantics and nesting a
heading inside it creates a confusing double structure for screen readers.
6. Output all eight `wp:details` blocks nested inside the group, ready to paste
into the code editor.
This pattern gets keyboard and screen reader support for free because <details> is
a native interactive HTML element, no ARIA attributes or JavaScript required. The
tradeoff is the independent open/close behavior noted in step 3, worth mentioning to
whoever requested “an accordion” since that word often implies single-open behavior
they may not realize core WordPress doesn’t provide.