How To Hide A Customizer Control in WordPress?

Question

I know contextual controls hide if for example the user navigates from the viewer certain pages.

But how can I achieve hiding a control under this scenario:

There is a type Select Control with an array of options from 1 to 6, Default being 1.

Then there are 6 type Text controls underneath. I want those controls (except for the first one) to be hidden on load and shown depending on what the user chooses from the Select control.

In other words the Select control determines the number of Text controllers the user would see.

I tried some JQuery which I am not very good at and the #customize-control_dadada... id's just would not obey.

I can't find any info on this matter, all I find is information about the contextual controls which are useful but do not seem what I need for this matter.

Any ideas? thank you in advance.

Answer 1

I was having the same issue as you. Try surrounding the #customize-control selector in a document.ready. For example:

(function($) {
    $( function() {
        if ($('#customize-control-my-control').length) {
            // Do stuff
        }
    });
})(jQuery)

Put this javascript in a script that is queued on the admin side. To enqueue the script add this to your functions.php:

add_action( 'admin_enqueue_scripts', 'admin_enqueue_scripts');

function admin_enqueue_scripts() {
    wp_register_script( 'admin-script', get_template_directory() . '/js/admin.js', array('jquery'), '1.0.0' );
    wp_enqueue_script('admin-script');
}

The above assumes the script is located in the current theme (get_template_directory). For plugin use: WP_PLUGIN_DIR . '/my-plugin';