ACF Accordion, Displaying a value of a specific text field

• Matthias Honert

• December 14, 2017 at 2:13 am

I’m using the accordion option in a repeater field.
Can someone give me a hint as to how it is possible to displaying a value of a specific text field in the accordion title.

At the moment I only have such repeating closed Accordion blocks:

infoblock
infoblock
infoblock

Inside each repeater field, there is a text field namded „Title“
A better Usability-Solution is to displaying the Value fo field title:

infoblock: Program
infoblock: General Infos
infoblock: Apply

Like this Image of this currently none-working plugin from Jeremy Waraksa.

Is there a hook or has someone already solved this problem?

• John

• August 16, 2018 at 3:30 pm

+1 for this!

Did you ever find a solution?

• Matthias Honert

• August 16, 2018 at 6:03 pm

Sorry no. I thought my customer probably didn’t need it at all.

I think from today’s view I would solve it with Javascript. Find the child field and copy & paste in the repeater title. Or something like that.

/adding-custom-javascript-fields/
Since 5.7:
/resources/javascript-api/

Best
Matthias

• John

• August 17, 2018 at 4:10 am

No problem Matthias, thanks for following up.

• gjorgjievski

• August 23, 2019 at 10:28 pm

I solved this with the following JS:

$( document ).ready(function() {

    dynamic_title_repeater_accordion('repeater_name_here', 'field_name_here');

});

function dynamic_title_repeater_accordion(repeater_name, field_name) {
    var information_tabs = $("div[data-name='" + repeater_name + "']");
    if (information_tabs.length) {
        var selector = "tr:not(.acf-clone) td.acf-fields .acf-accordion-content div[data-name='" + field_name + "'] input";

        // add lister
        $(information_tabs).on('input', selector, function() {
            var me = $(this);
            me.closest('td.acf-fields').find('.acf-accordion-title label').text(me.val());
        });

        // trigger the function on load
        information_tabs.find(selector).trigger('input');

    }
}

To include the JS file in the admin backend, in functions.php add this and change the path to the JS file:

function acf_admin_enqueue_script($hook) {
    if ('post.php' !== $hook) {
        return;
    }
    wp_enqueue_script('admin-js', 'path_to/admin.js');
}

add_action('admin_enqueue_scripts', 'acf_admin_enqueue_script');

• Matthias Honert

• August 30, 2019 at 1:26 am

@gjorgjievski looks really good! Thank you for sharing your work for other peoples! I guess, this question is solved!