How to Create Custom Accordion Blocks with WordPress ACF

Are you looking for a way to create custom accordion blocks with WordPress ACF? Custom blocks can improve the functionality and design of your website, and ACF provides a user-friendly way to create them.

In this article, I will show you step-by-step how to create custom accordion blocks with WordPress ACF, using a Codepen interface built by Nabeel Faheem as an example.

Step 1. Register and Set Up for Create Custom Accordion Blocks with WordPress ACF

Before we can create the custom accordion block, we need to register it with WordPress ACF. Follow these steps to set it up:

Read: How to register custom blocks with WordPress ACF

1. Register the new block

/* ======================================================================== */
/* Register Custom Block Using ACF */
/* ======================================================================== */
add_action('acf/init', 'rzwn_init_block_types');
function rzwn_init_block_types(){

  if(function_exists('register_block_type')){
     register_block_type(get_template_directory() . "/template-parts/blocks/accordion/block.json");
  }

}

2. Update the directory in your theme

|-- theme
    |-- template-parts
        |-- blocks
            |-- accordion
                |-- block.json
                |-- accordion-block.php
                |-- accordion-block.css

3. Register a new field group under the ACF menu panel in your admin dashboard, and save the changes

4. Register the custom block (Block: Accordion) that we created in the previous step

In the image above, we registered a new field called “Accordion Item” with a field type of Repeater. Inside the repeater, we added two fields: “Title” with a field type of text, and “Content” with a field type of WYSIWYG Editor.

Step 2: Render the Custom Accordion Block

After registering the custom accordion block, we need to render it on our website. Follow these steps to render the field we registered:

1. Copy the code below into the accordion-block.php file

<?php if (have_rows('accordion_item')) : ?>
  <div class="acc-container" id="<?php echo $block['id']; ?>">
    <?php while (have_rows('accordion_item')) : the_row(); ?>
      <?php
      $title = get_sub_field('title');
      $content = get_sub_field('content');
      ?>
      <div class="acc">
        <div class="acc-head">
          <p><?php echo $title; ?></p>
        </div>
        <div class="acc-content">
          <?php echo $content; ?>
        </div>
      </div>
    <?php endwhile; ?>
  </div>

  <script>
    jQuery(document).ready(function() {
      jQuery('#<?php echo $block['id']; ?> .acc:nth-child(1) .acc-head').addClass('active');
      jQuery('#<?php echo $block['id']; ?> .acc:nth-child(1) .acc-content').slideDown();
      jQuery('#<?php echo $block['id']; ?> .acc-head').on('click', function() {
        if (jQuery(this).hasClass('active')) {
          jQuery(this).siblings('.acc-content').slideUp();
          jQuery(this).removeClass('active');
        } else {
          jQuery('#<?php echo $block['id']; ?> .acc-content').slideUp();
          jQuery('#<?php echo $block['id']; ?> .acc-head').removeClass('active');
          jQuery(this).siblings('.acc-content').slideToggle();
          jQuery(this).toggleClass('active');
        }
      });
    });
  </script>
<?php endif; ?>

2. Copy the CSS properties below into the accordion-block.css file

.acc-container {
  max-width: 700px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.acc {
  margin-bottom: 10px;
}

.acc-head {
  background-color: rgb(155, 154, 87);
  padding: 15px 10px;
  font-size: 22px;
  position: relative;
  cursor: pointer;
 }

 .acc-head::before,
 .acc-head::after {
  content: '';
  position: absolute;
  top: 50%;
  background-color: #fff;
  transition: all .3s;
 }

 .acc-head::before {
  right: 30px;
  width: 3px;
  height: 20px;
  margin-top: -10px;
}

.acc-head::after {
  right: 21px;
  width: 20px;
  height: 3px;
  margin-top: -2px;
}

.acc-head p {
  color: #fff;
  font-weight: bold;
}

.acc-content {
  padding: 15px 10px;
  display: none;
}
        
.acc-head.active::before {
    transform: rotate(90deg);
}

Once you have completed all the steps, you can test the custom accordion block on your Gutenberg editor. Watch this demo to see how it works

I hope this article has helped you learn how to create custom accordion blocks with WordPress ACF. By following the above steps, you can add custom blocks to your website easily.

Custom blocks can enhance the functionality and design of your website, making it more user-friendly and attractive for visitors. To learn more about building WordPress websites, check out my other articles.