Accessible Accordion FAQ Using the Enhanced Details Block

Why it’s new and useful:
WordPress 6.8 introduced the ability to group multiple Details blocks using the name attribute, which creates a true accordion effect—opening one section closes the others automatically. This snippet lets you quickly create an accessible FAQ accordion in the Block Editor, styled for clarity, with no extra JavaScript or plugins required.

1. Add the Snippet to Your Theme’s functions.php or a Custom Plugin

/* Enhanced Details Block Accordion Styles for WP 6.8+ */
.wp-block-details[name="faq-accordion"] summary {
  cursor: pointer;
  font-weight: bold;
  padding: 10px 0;
  outline: none;
  transition: color 0.2s;
}
.wp-block-details[name="faq-accordion"][open] summary {
  color: #0073aa;
}
.wp-block-details[name="faq-accordion"] {
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

2. How to Use in the Block Editor

• Add several Details blocks to your page or post.
• In the block settings sidebar, under Advanced → Name Attribute, set the name to faq-accordion for each Details block.
• Optionally, set an HTML Anchor for direct linking.
• Add your FAQ question as the summary, and the answer as the content.

Example Structure:

<details class="wp-block-details" name="faq-accordion">
  <summary>What is WordPress 6.8?</summary>
  WordPress 6.8 is the latest major release, featuring performance, design, and accessibility improvements.
</details>
<details class="wp-block-details" name="faq-accordion">
  <summary>How does the new accordion work?</summary>
  By sharing the same "name" attribute, only one section can be open at a time, improving accessibility and user experience.
</details>

Or, simply use the Block Editor UI to add and configure these blocks—no code needed!

3. Features

• True accordion behavior: Only one section open at a time, thanks to the shared name attribute5.
• Fully accessible: Uses semantic HTML and built-in browser behaviors.
• No JavaScript required: Pure HTML and CSS.
• Easy to style: Customize the CSS to match your theme.
• Perfect for FAQs, help sections, or documentation.