How to create a WordPress accordion block (no code)

If you need to organize content like an FAQ section in WordPress, the accordion block is the perfect solution. Accordions are a fantastic way to present a lot of information on a page without overwhelming your visitors. They allow you to organize content into collapsible panels that visitors can click to reveal information, making your pages tidy and user-friendly.

While WordPress doesn’t have a block named “Accordion” just yet, it has a hidden gem that does the exact same thing: the Details block.

In this guide, we’ll show you how to use the native Details block to create a beautiful and functional WordPress accordion block. We’ll cover how to create an exclusive accordion (where only one item can be open at a time) and how to customize its design.

What is an accordion block?

An accordion is a list of items that can be clicked to show or hide their content. It’s a common design pattern used for:

• Frequently Asked Questions (FAQs): The most popular use case. Organize answers into a clean list, allowing users to scan questions and expand only the ones they need.
• Services, features, or values: Present your company’s offerings or core values in an easy-to-browse format. Visitors can get a high-level overview and then explore the details of what interests them.
• Step-by-step processes or guides: Break down a complex process or set of instructions into a series of clear, collapsible steps, making them easier to follow.

Using an accordion improves user experience by reducing scrolling and helping visitors find information faster. This is especially effective on mobile devices where screen space is limited, making your content more scannable.

How to create an accordion block in WordPress

Creating a basic accordion is surprisingly simple and doesn’t require any special plugins. It’s all done with the core Details block. To create a complete accordion feature, you’ll place multiple Details blocks together.

Step 1: Group your accordion items

Before adding your individual accordion items, it’s a good practice to place them inside a Group block. This allows you to apply styling (like a background color or padding) to the entire accordion section at once.

1. In the WordPress block editor, click the block inserter and search for “Group”.
2. Add the Group block to your page.

Step 2: Add the Details block

Now, inside the Group block you just created, let’s add your first accordion item.

1. Click within the Group block.
2. Search for “Details” and click to add the block to your page.

Step 3: Write the summary

The block will appear with placeholder text for the title. The “Summary” is the text that will always be visible and that users will click on. Simply click into the “Write summary…” area and type your question or heading (e.g., “How do I install WordPress?”).

Step 4: Add the content

Next, you’ll add the content that will be revealed when the user clicks the summary. Click on the placeholder text “Type / to add a hidden block” to start typing. You are not limited to text! You can add any other WordPress block inside the details area, including images, buttons, lists, and more.

Repeat these steps for each item you want to add to your FAQ or content section.

Tip: If you’d like an accordion item to be open by default when the page loads, simply select that Details block and switch on the “Open by default” toggle in the block settings.

How to create an exclusive accordion block

By default, visitors can open multiple accordion items at the same time. In some cases, you might prefer that only one item is open at a time. When a user clicks a new item to expand its content, the previously opened one automatically closes. This is called an exclusive accordion.

WordPress includes a built-in feature to achieve this behavior directly from the editor. Here’s how to set it up:

1. Select a Details block.
2. In the block sidebar on the right, expand the Advanced panel.
3. Find the Name Attribute field.
4. Enter a unique name for your accordion group (e.g., faq-section).
5. Repeat this for all other Details blocks in your group, using the exact same name in the Name Attribute field for each one.

By giving multiple Details blocks the same value in the Name Attribute field, you assign them a common name attribute. This connects all the Details blocks together, ensuring that only one item in the group can be open at a time. It’s a powerful native feature for creating a cleaner user experience.

Customize your accordion block with Twentig

The default Details block is functional, but it’s visually plain. The default triangle icon might not match your site’s design. This is where the Twentig plugin comes in.

Twentig enhances the WordPress block editor and gives you powerful styling options for core blocks, including the Details block. It lets you easily customize the accordion icon.

1. Make sure you have Twentig installed and activated.
2. Select a Details block.
3. In the block settings sidebar, find the Display panel added by Twentig.
4. Under the Icon section, choose between different icon styles: Arrow, Plus, or Plus circle. You can also adjust the Icon Position to place it on the left or right.

This small design tweak can make your accordions look much more professional and integrated with your theme’s style. You can further refine the style of your accordion by using the built-in typography, color and dimensions options.

Putting it all together: Live example and code

Here is an interactive demo of the styled, exclusive accordion we built. For your convenience, the full code that creates this result — which uses multiple Details blocks with the same name attribute, a custom icon, and a border style — is available to copy right below the example.

					

					
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:details {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|15"},"border":{"bottom":{"width":"1px"},"top":[],"right":[],"left":[]}},"twIcon":"arrow"} -->
<details class="wp-block-details" style="border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)" name="faq-section">
	<summary>Can I put images inside the accordion?</summary>
	<!-- wp:paragraph -->
	<p>Yes! The content area can hold any WordPress block, including images, lists, and buttons.</p>
	<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
	
<!-- wp:details {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|15"},"border":{"bottom":{"width":"1px"},"top":[],"right":[],"left":[]}},"twIcon":"arrow"} -->
<details class="wp-block-details" style="border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)" name="faq-section">
	<summary>Will this work with any WordPress theme?</summary>
	<!-- wp:paragraph -->
	<p>Yes, the Details block is a standard core feature, so it is designed to be compatible with all WordPress themes.</p>
	<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
	
<!-- wp:details {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|15"},"border":{"bottom":{"width":"1px"},"top":[],"right":[],"left":[]}},"twIcon":"arrow"} -->
<details class="wp-block-details" style="border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)" name="faq-section">
	<summary>Will this slow down my website?</summary>
	<!-- wp:paragraph -->
	<p>No, not at all. Because this method uses WordPress's built-in core blocks and features, it's extremely lightweight and won't have an impact on your site's performance.</p>
	<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
	
<!-- wp:details {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|15"},"border":{"bottom":{"width":"1px"},"top":[],"right":[],"left":[]}},"twIcon":"arrow"} -->
<details class="wp-block-details" style="border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)" name="faq-section">
	<summary>Is the Twentig plugin free?</summary>
	<!-- wp:paragraph -->
	<p>Yes, the Twentig plugin is entirely free. It includes many options that enhance core blocks, including the Details block used to create this accordion.</p>
	<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
</div>
<!-- /wp:group -->

				

A dedicated Gutenberg accordion block in the future?

The WordPress core team is always working on improving the block editor. There is an active proposal and ongoing development for a dedicated Accordion block in Gutenberg. You can follow its progress on this GitHub pull request.

However, until that block is released, the Details block is the recommended way to create a WordPress accordion block.