Question

I am having trouble with my hide_fields() function. I am trying to hide all ‘row-layout-field‘ <div>-s and then show certain divs that are within the same parent() parent() as a <select>.

Depending on what you choose from the <select>, certain fields should be shown.

There are several of these rows, and the problem is, if I have 3 rows, when I select on option from any of the <select>-s, it hides all the fields everywhere.

The code is pasted below.

The markup is from the WordPress admin using ACF, so its pretty intense, but, if you need to see it, and can be found here: http://pastie.org/4467255

(function($) {

    // hide_fields / a small function to hide all the conditional fields
    function hide_fields() {
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field:nth-child(1n+2)').hide();
    }

    // Document Ready
    $(document).ready(function() {

        // hide all fields
        hide_fields();

        // trigger change on the select field to show selected field
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').trigger('change');

    });

    // Hero Type change
    $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').live('change', function() {

        // vars
        var value = $(this).val();

        // hide all fields
        hide_fields();

        // show the selected field
        if( value == "image" ) {
            // console.log( $(this).parent().parent().find('div.row-layout-field:nth-child(2)') );
            $(this).parent().parent().find('div.row-layout-field:nth-child(2)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(3)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
        }
        else if( value == "video" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
        }
        else if( value == "tweet" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
        }
        else if( value == "statistic" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(7)').show();
        }

    });

})(jQuery);

Thanks for any assistance.

EDIT:

I managed to achieve what I was needing with this: http://pastie.org/4467732

Perhaps not the most elegant, but it works.

Answer 1

I’m a bit of a fool and I added my answer to my original post, rather than answering my own question… here is what is above:

I managed to achieve what I was needing with this: http://pastie.org/4467732

Perhaps not the most elegant, but it works.