← All posts

Gutenberg Accordion Block with ACF Repeater, No React

scripts organizer

A static accordion is easy to copy from a tutorial site. It gets harder when your client needs to add, edit and remove items without touching code, and a custom Gutenberg block usually means React and a build step. In this video we build a Gutenberg accordion block with an ACF Repeater. We paste in ready-made HTML, SCSS and JavaScript, then swap the hard-coded sections for a repeater loop. The result is an animated accordion that you can edit from the block editor, with as many rows as you need.

Start from a working accordion

Writing accordion markup and animation from scratch takes time. We start from a snippet we already know works. Here we use the Animated Accordion (Slide Down) example from the W3Schools "How To Create an Accordion" page. It already collapses and expands with an animation.

  1. Create a new ACF block. Set the title to Accordion and keep Enable ACF Block switched on.
  2. Pick an icon in Dashicon Name (we use menu-alt3). Set Category to Widgets.
  3. Publish the block.
  4. Copy the HTML structure into the PHP tab, the CSS into the SCSS tab and the script into the JS tab.

When you paste the script, the editor now formats it for you automatically. This is the SCSS as pasted:

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Next, reload the page editor so it picks up the new block. Add Accordion to the page and preview it.

Fix theme style conflicts with one wrapper div

The first preview looked broken. The theme was adding its own styling to the elements inside the block. You don't need to override the theme's styles. Wrap the whole markup in one container <div>. Once we did that, the preview showed Section 1, 2 and 3 opening and closing as expected.

At this stage the accordion is still static, with three hard-coded sections. The next step is to make the content editable.

Add the ACF Repeater field

If every item is hard-coded, each content change means going back into the code. A Repeater field lets editors add as many rows as they want, and each row has its own fields.

The block editor has a preview panel with Home and Fields buttons. Fields takes you straight to the ACF field groups, so you don't have to leave the block editor.

  1. Click Fields and add a new field group. We named ours Block - Accordion.
  2. Add a field with Field Type set to Repeater, Field Label Accordion and Field Name accordion.
  3. Under Sub Fields, add two Text fields: Title (title) and Body (body).
  4. Leave Layout on Table.
  5. Scroll down to the location rules and assign the group to the Accordion block.
  6. Click Save Changes.

Loop the repeater in PHP

The repeater now stores the data, but the block still prints the static HTML. You don't have to write the loop yourself. We took it from the ACF Repeater documentation on advancedcustomfields.com.

One thing to note: the documentation has more than one example. We use the have_rows() / the_row() loop pattern, then replace the example's sub-field calls with our own title and body fields.

  1. Copy the loop from the documentation into the PHP tab.
  2. Change the repeater name to accordion in both have_rows() calls.
  3. Put one accordion item (the button and its panel) inside the loop. Output the_sub_field('title') in the button and the_sub_field('body') in the panel.
  4. Delete the three static sections and keep the outer wrapper <div>.

This is the final PHP tab from the video:

<div>
<?php

// Check rows existexists.
if( have_rows('accordion') ):

    // Loop through rows.
    while( have_rows('accordion') ) : the_row();

        ?>

        <button class="accordion"><?php the_sub_field('title'); ?></button>
        <div class="panel">
        <p><?php the_sub_field('body'); ?></p>
        </div>


        <?php
    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;
?>
</div>

The loop outputs one button and one panel for each row. The class names match the pasted SCSS and JS, so you don't need to change the styling or the script.

Edit accordion rows in the block editor

When you reload the page editor, the Accordion block shows the repeater as a table with Title and Body columns. Your client can now manage the content without code:

  • Type the title and body for each row.
  • Use Add Row or the + / − icons next to a row to add or remove items.
  • Delete a row you don't need and confirm.

Click Update and preview the page. Title 1, Title 2 and Title 3 open and close with the same animation as before, but the content now comes from the block's fields. You can also add more sub-fields to each row as you need them.

Who is this for

  • WordPress developers who want custom Gutenberg blocks without learning React or setting up a build process.
  • Site builders who find a component online (HTML, CSS, JS) and want to turn it into a block that clients can edit.
  • Agencies who want clients to manage FAQ-style or collapsible content in the block editor without breaking the markup.

FAQ

Do I need React to build a dynamic Gutenberg accordion block? No. In this video the block is plain HTML in the PHP tab, CSS in SCSS and the script in JS, with ACF fields for the dynamic content. No React code is written.

How do I loop through an ACF Repeater inside a block? Use the have_rows() / the_row() loop from the ACF Repeater documentation. Pass it your repeater's field name (here accordion), then output each sub-field with the_sub_field().

Why does my accordion look broken after I paste the code? In our case the theme was styling the elements inside the block. Wrapping all the markup in a single container <div> fixed it.

Can editors add or remove accordion items? Yes. The repeater shows up in the block as a table. Editors can add rows, edit titles and bodies, and delete rows, then update the page.

Can I add more fields to each accordion item? Yes. Add more sub-fields to the repeater and output them in the loop the same way as title and body.

Get Scripts Organizer ACF Gutenberg Addon → dplugins.com

Related posts