Advanced Custom Fields: use field from repeater to insert title in ACF accordion field

To make content pages more manageable, it can be a good way to use the ACF accordion field to wrap content so the admin user doesn't have to scroll as much to direct content. The ACF accordion field can be given a fixed title, such as. "Partnership", but now if you want it to be a bit more dynamic and customized to the content of the accordion then you can make use of this Jquery function. The function changes the title of each accordion to the selected field in the repeater.

The function is inserted in functions.php where I use the admin_head action to insert the code into wp-admin. Now I know that there are a lot of actions. Maybe in this case it would be better to link it to admin_print_scripts or similar. However, I would normally store the function in an external file which is queued to be loaded with the admin_enqueue_scripts action.


function admin_js() {
jQuery(document).ready(function ($) {
/*first set name of repeater and after name of the field you will use as title */
    dynamic_title_repeater_accordion('partnerships', 'title');
    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 list
            $(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');
        }
    }
});
}
add_action('admin_head', 'admin_js');