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?

    • John

    • August 16, 2018 at 3:30 pm

    +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

    • John

    • August 17, 2018 at 4:10 am

    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.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.