Como adicionar acordeões no editor de blocos do WordPress

Como adicionar acordeões no editor de blocos do WordPress

An accordion is a toggle-based layout element that hides and reveals content when clicked. You see a heading, click it, and the rest of the content slides down. Click it again, and it hides. It’s like a dropdown but for content instead of menus.

Now, what happens if you implement accordions correctly? Your content becomes easier to explore, users stay focused, mobile navigation improves, and search engines may reward you with better visibility. If you do everything right, they will work like a table of contents that answers questions before users even ask.

This guide will show you how to implement accordions in WordPress using editor-friendly tools that keep the process simple and clean, without any need for coding.


Add Accordions in WordPress

There’s more than one way to add accordions in WordPress, but not all of them are easy to use inside the Block Editor. In the next sections, we’ll start with a basic method using a built-in block, then move on to a more flexible option with a plugin.

Method 1: Using the Native Details Block

The easiest way to create an accordion in WordPress is by using the built-in Details block. Let’s see how it works.

Step 1: Add the Details Block

Open your post or page in the Block Editor. Click the plus (+) icon, search for Details, and insert the block.

Add the Details Block

Step 2: Add the Title and Content

Enter your accordion title in the “Write summary” placeholder. Then, click the arrow icon next to it to expand the section. Once expanded, a content area will appear below where you can add text, images, lists, or any other blocks.

Step 3: Add Additional Toggles

To add more accordion items, repeat the same process by inserting new Details blocks. For a nested layout, expand the content area of an existing Details block, click the plus (+) icon inside it, and add another Details block.

This method is perfect for quick FAQs or minimal setups. Just keep in mind, it offers basic styling only and doesn’t include advanced design options.


Método 2: Usando o plug-in Ultimate Blocks

If you want more styling options and better control over your accordion, the Blocos definitivos plugin is a great choice. It offers a Content Toggle block that works perfectly in the Block Editor.

Step 1: Add the Plugin to Your Site

From your WordPress dashboard, head to the Plugins menu and click on Add New. In the search bar, type Ultimate Blocks, then click Install Now on the plugin card. Once the installation finishes, activate it to make the new blocks available in the editor.

Add Ultimate Blocks to Your Site

Etapa 2: Inserir o bloco de alternância de conteúdo

Open the page or post where you want the accordion. Click the plus (+) icon, search for Content Toggle, and add it. This block creates an expandable section with a title and content area.

Inserir o bloco de alternância de conteúdo

Step 3: Add Title and Content

Type your accordion title in the label field, then add your content below. You can include any type of block inside the toggle, such as text, images, buttons, lists, or even another Content Toggle block inside the content area to create a nested accordion. 

Add Title and Content

To add more toggle sections, simply click on the (+) icon when you hover over the existing panels. To remove a panel, do the same except that instead of clicking the (+) icon, you choose the (x) icon from the top right corner. 

Add More Panels

Step 4: Customize the Accordion

From the block settings panel on the right, you can control the panel title, adjust the toggle state, enable FAQ Schema, add a built-in search option for your accordion, choose a status icon, change text or background colors, and much more. 

Customize the Accordion
Customize the Accordion

If you’re using it for FAQs, you can also enable FAQ Schema markup from the settings to help your content qualify for rich snippets in Google search.

Enable Schema

Conclusão

If your goal is to make long content easier to scan, accordions deliver a clean solution. You learned two approaches: the native Details block offers a lightweight setup with no extra plugins and fast loading. The Content Toggle block from Ultimate Blocks adds advanced styling controls, nested panels, and built-in FAQ schema. Both methods enhance mobile usability engagement and SEO potential. Choose the approach that best fits your workflow and content needs.



A equipe do Tableberg

Crie belas tabelas no WordPress - visualmente!

Diga adeus às tabelas enfadonhas. Com o Tableberg, você pode criar tabelas responsivas e interativas usando o Block Editor, sem precisar de código.

Interface Tableberg
Seja o primeiro a experimentar nosso bloco de tabelas do WooCommerce
Esse é o texto padrão da barra de notificação