The New Accordion Block in WordPress 6.9 (No Plugin Needed)

WordPress 6.9 Finally Has a Native Accordion Block

If you’ve ever wanted collapsible FAQ sections or toggle content on your WordPress site, you needed a plugin. Not anymore. WordPress 6.9 ships with a built-in accordion block that handles expandable/collapsible content natively, no plugin required.

This is one of the most requested features in WordPress history. Let’s walk through exactly how to use it, when it makes sense, and some practical examples you can copy right now.

What Is the Accordion Block?

The accordion block (officially called the Details block in WordPress) creates collapsible sections where visitors click a heading to expand or collapse the content beneath it. Think FAQ pages, product specifications, step-by-step instructions, or any content where you want to keep things organized without overwhelming visitors with a wall of text.

Under the hood, it uses the native HTML <details> and <summary> elements. This means it works without JavaScript, loads instantly, and is fully accessible to screen readers. If you’ve been exploring other new features, check out WordPress 6.9 block visibility which lets you hide blocks without deleting them.

How to Add an Accordion Section (Step by Step)

Step 1: Open the Block Editor

Create a new page or post, or edit an existing one. You’ll be working in the standard WordPress block editor, no special setup needed.

Step 2: Add the Details Block

Click the + button to add a new block and search for “Details”. You can also type /details directly in the editor to insert it quickly.

Step 3: Write Your Summary (the Clickable Heading)

The first line is your summary, this is what visitors see before they click. Write a clear, descriptive heading. For example: “What payment methods do you accept?” or “System Requirements”.

Step 4: Add Your Hidden Content

Below the summary, add any blocks you want inside the accordion. This can include paragraphs, lists, images, videos, tables, virtually any WordPress block works inside a Details block.

Step 5: Configure Open/Closed State

In the block settings sidebar, you can choose whether the accordion starts open or closed. By default, it starts closed, which is usually what you want for FAQ sections.

See It in Action: Live Accordion Examples

Here are actual accordion blocks so you can see exactly how they work on the frontend. Click any heading below to expand it:

What exactly is the Details block in WordPress 6.9?

The Details block is WordPress’s native accordion element. It uses the HTML <details> and <summary> tags under the hood, which means it works without any JavaScript, loads instantly, and is fully accessible to screen readers and keyboard navigation. You can find it by searching for “Details” in the block inserter or typing /details in the editor.

Do I need a plugin for accordions now?

For most use cases, no. The native Details block handles basic expand/collapse perfectly. You might still want a plugin if you need: FAQ Schema markup for rich results in Google, smooth slide animations instead of instant toggle, an “only one open at a time” behavior, or custom icons instead of the browser’s default arrow.

Does Google index content inside accordion blocks?

Yes. Google has confirmed that content inside <details> elements is indexed normally. The content is present in the DOM regardless of whether it’s visually expanded or collapsed, so search engines can read it. However, don’t hide your most critical content solely inside accordions, keep important information visible too.

Can I nest blocks inside an accordion?

Absolutely. The Details block supports any inner blocks: paragraphs, lists, images, videos, tables, code blocks, even other Details blocks for nested accordions. This makes it incredibly flexible for organizing complex content like product specifications, multi-step instructions, or detailed FAQ answers.

5 Practical Use Cases for the Accordion Block

1. FAQ Pages

The most obvious use case. Create a dedicated FAQ page with each question as a Details block. Visitors scan the questions and only expand the ones they care about. This keeps your FAQ page clean even with 20+ questions.

2. Product Specifications

If you sell products (physical or digital), use accordions for technical specs, sizing charts, compatibility info, and shipping details. Shoppers get the information they need without scrolling past content that doesn’t apply to them.

3. Step-by-Step Tutorials

Break long tutorials into collapsible steps. Readers who are already past step 3 can skip straight to step 4 without scrolling. This is especially useful for technical guides with code snippets.

4. Course or Lesson Outlines

If you run an online course or membership site, use accordions to show module outlines. Each module heading expands to show the lessons inside. It gives visitors a quick overview without overwhelming them.

5. Legal and Policy Pages

Privacy policies, terms of service, and refund policies are long and boring. Accordions let you organize them by section so visitors can jump to the part they actually care about.

How to Create a Full FAQ Section

Here’s the fastest way to build a complete FAQ page:

1. Create a new page and title it “Frequently Asked Questions”
2. Add a Group block to wrap your FAQ section (optional but recommended for styling)
3. Inside the group, add your first Details block
4. Type your question as the summary
5. Add a paragraph block inside with your answer
6. Duplicate the Details block for each additional question (use the three-dot menu → Duplicate)
7. Update each duplicate with the new question and answer

Pro tip: If you want one accordion open by default (like the most common question), select that Details block and toggle “Open by default” in the sidebar settings.

Styling Your Accordion Blocks

WordPress 6.9 gives you several styling options right in the editor:

• Background color, Set a background for each accordion to make them visually distinct
• Text color, Change the summary and content text colors
• Typography, Adjust font size, weight, and line height
• Spacing, Add padding and margin to control the layout
• Border, Add borders or rounded corners for a polished look

If you’re using a block theme (like Twenty Twenty-Five), these styles integrate with your theme’s global styles automatically. You can also add custom CSS classes for more specific control.

Accordion Block vs Plugin: Do You Still Need a Plugin?

For most use cases, the native Details block is enough. Here’s when you might still want a plugin:

Feature	Native Details Block	Accordion Plugin
Basic expand/collapse	Yes	Yes
FAQ Schema markup	No (needs separate schema)	Often included
Animation effects	No (instant toggle)	Yes (smooth slide)
Only-one-open mode	No	Yes
Custom icons	Browser default arrow	Custom +/- or chevrons
Nested accordions	Yes	Yes
Performance impact	Zero (native HTML)	Adds JS/CSS
Accessibility	Excellent (native)	Varies by plugin

Bottom line: If you need FAQ Schema for SEO rich results or smooth animations, a plugin like Yoast FAQ Block or Stackable adds those features. For everything else, the native block is faster, lighter, and more reliable.

SEO Tips for Accordion Content

Search engines can read content inside accordion blocks, Google has confirmed that content in <details> elements is indexed normally. But there are a few things to keep in mind:

• Don’t hide critical content. If your most important information is inside an accordion, make sure it’s also represented in your page’s visible content or meta description.
• Use descriptive summaries. The clickable heading should include relevant keywords naturally. “What is WordPress 6.9?” is better than “Click here to learn more.”
• Add FAQ Schema separately. The native block doesn’t generate FAQ structured data. Use a plugin like Rank Math or Yoast to add FAQ Schema for eligible content.
• Keep it user-first. Don’t use accordions just to stuff more content on a page. Use them when they genuinely improve the reading experience.

Accessibility: Why the Native Block Wins

The Details block uses semantic HTML (<details> and <summary>), which means:

• Screen readers announce it correctly as an expandable section
• Keyboard users can toggle with Enter or Space
• It works without JavaScript, content is accessible even if scripts fail
• The browser handles focus management automatically

Many accordion plugins use custom JavaScript that can break accessibility. The native approach is inherently more reliable and inclusive.

Common Mistakes to Avoid

• Too many accordions on one page. If everything is collapsed, visitors don’t know what’s on the page. Limit accordions to secondary content, keep your main message visible.
• Vague summary text. “More info” or “Click here” tells visitors nothing. Write specific, descriptive summaries.
• Using accordions for short content. If the hidden content is just one sentence, it’s not worth the extra click. Just show it.
• Forgetting mobile users. Test your accordion pages on mobile. Make sure summary text isn’t too long and tap targets are large enough.

What’s Next for Accordion Blocks in WordPress

WordPress 6.9 is just the beginning. Future updates are expected to bring:

• Built-in animation options for smoother expand/collapse transitions
• Accordion group block that enables “only one open at a time” behavior
• Better integration with theme.json for global accordion styling
• Possible FAQ Schema support directly in the block

For now, the Details block covers 90% of what most sites need. It’s fast, accessible, and requires zero maintenance, exactly what a native WordPress feature should be.

Wrapping Up

The accordion block in WordPress 6.9 eliminates the need for a plugin for most collapsible content use cases. It’s built on native HTML, works perfectly with screen readers, loads with zero JavaScript overhead, and integrates with your block theme’s styling system.

Whether you’re building FAQ pages, organizing product details, or structuring long tutorials, the Details block is now the simplest way to do it. If you’re just getting started with WordPress, our guide to creating your first blog post covers the block editor basics. And if you need a contact page, see how to set up a contact form without plugins too.

Accordion Block Block Editor Details Block FAQ Page

Last modified: February 24, 2026