How to display the content of a specific ACF row on button click

Question

Thanks in advance for any help or input.

I have this code getting all the rows in an ACF Repeater and displaying them as square blocks.

<div class="class_wrapper"> 
<?php if( have_rows('classes') ): ?>

<div class="class_blocks">  
  <?php while( have_rows('classes') ) : the_row(); ?>
      <div class="class-callout-block" style="background:url(<?php the_sub_field('class_image'); ?>);">
      <h2><?php the_sub_field('title'); ?></h2>
        </div>

        <?php

    endwhile;

endif;

?>

</div>

What I am trying to achieve is when a block is clicked, the div below populates with the same content as the block clicked. ie. it calls the same repeater row.

If anyone can point me in the right direction it would be greatly appreciated.

My apologies i wasn't sure if there would be a JavaScript solution. — Andy Mac
What I am trying to achieve is when a block is clicked, the div below populates .... is usually done with JavaScript. Have you tried anything? — Prajwal
To be honest no... i'm just not sure how to go about it. Plus I am still learning JS. — Andy Mac

Prajwal Prajwal · Accepted Answer · 2018-01-16T06:52:51

You want to copy the data of class-callout-block to another div. By the loop I'm guessing there are many blocks like that and one output block. I'm not sure about the exact requirement, but I'll show you how to copy a div content & put it in another.

Check the below code on how to do it and implement it yourself. The below code uses simple JavaScript functions and subscribing to an event listener.

//This is for first example. I assign a function click event 
document.getElementById("copy-block").addEventListener("click", function(e) {
  document.getElementById("paste-block").innerHTML = e.target.innerHTML; //this replaces the content.
});


//This is for second example. I assign a function click event for each element of the copy-block-item. same as first one, but in loop.

var lis = Array.from(document.querySelectorAll(".copy-block-item"));
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function(e) { 
    document.getElementById("paste-block-2").innerHTML = e.target.innerHTML; //this replaces the content.
  });
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid grey;
  float: left;
}

.paste{
  border: 1px solid blue;
}

<div class="box" id="copy-block">This contents needs to be copied to different div</div>
<div class="box paste" id="paste-block"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<p> This is if you have multiple boxes</p>
<div class="box copy-block-item">This contents needs to be copied to different div2</div>
<div class="box copy-block-item">This contents needs to be copied to different div2 2</div>
<div class="box copy-block-item">This contents needs to be copied to different div2 3</div>
<div class="box paste" id="paste-block-2"></div>

Please note: Array.from() is not supported in IE.

How to display the content of a specific ACF row on button click

1 Answers