Hide ACF from source code until a "show" button is clicked

Question

I am looking for a way to hide the content of an AFC (advanced custom field) on the front-end until the user clicks a "Show" Button.

I don't want to use CSS (display:none) approach. The ACF content should not appear on the source code of the page, it should only be loaded after the user clicks.

How can i achieve this?

Answer 1

You're going to need to $.ajax() the contents of the field(s) on a click.

In a nutshell:

In your page template

<?php
global $post;
$post_id = $post->ID;
?>
<button class="acf-get-content-button">Let's see that content</button>
<div id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS

(function($) {
  $('.acf-get-content-button').click(function(e){
    e.preventDefault();
    var $contentWrapper = $( '#acf-content-wrapper' );
    var postId = $contentWrapper.data( 'id' );

    $.ajax({
      url: "/wp-content/plugins/my-custom-plugin/public/field-ajax.php",
      type: "POST",
      data: {
        'post_id': postId
      },
    })
      .done(function( data ) {
        $contentWrapper.append( data );
      });
  });
})(jQuery);

field-ajax.php

<?php
define('WP_USE_THEMES', false);
require_once('../../../../wp-load.php');

$post_id = $_POST["post_id"];
$content = get_field( 'field', $post_id );

echo $content;

This code will need customization for your use, so it'll take some more research on your part.

Note that I placed the ajax script inside a custom plugin. This is what I would recommend, but some security plugins (iThemes Security, at least) has the option to disable running PHP in the plugins folder, which would break this.