Support

Account

Home Forums Backend Issues (wp-admin) ACF Accordion, Displaying a value of a specific text field

Solved

ACF Accordion, Displaying a value of a specific text field

  • 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?

  • +1 for this!

    Did you ever find a solution?

  • 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

  • No problem Matthias, thanks for following up.

  • 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');
  • @gjorgjievski looks really good! Thank you for sharing your work for other peoples! I guess, this question is solved!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.