Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Show or hide WordPress customizer control on change of another control. https://florianbrinkmann.com/en/3783/conditional-displaying-and-hiding-of-customizer-controls-via-javascript/
;(function () {
/**
* Run function when customizer is ready.
*/
wp.customize.bind('ready', function () {
wp.customize.control('slug_select_control', function (control) {
/**
* Run function on setting change of control.
*/
control.setting.bind(function (value) {
switch (value) {
/**
* The select was switched to the hide option.
*/
case 'hide':
/**
* Deactivate the conditional control.
*/
wp.customize.control('slug_conditional_control').deactivate();
break;
/**
* The select was switched to »show«.
*/
case 'show':
/**
* Activate the conditional control.
*/
wp.customize.control('slug_conditional_control').activate();
break;
}
});
});
});
})();
@florianbrinkmann

This comment has been minimized.

Copy link
Owner Author

commented Jun 24, 2017

This function hides the customizer control with the ID slug_conditional_control if the select control slug_select_control has the value hide, and displays slug_conditional_control if slug_select_control has the value show.

@CA-Irag

This comment has been minimized.

Copy link

commented Feb 19, 2018

Hi, It's working a bit but whenever the conditional control disappears, it comes back right away.. do you have an idea what's wrong in my code?//WP Customize Scripts ;(function () { /** * Run function when customizer is ready. */ wp.customize.bind('ready', function () { wp.customize.control('cto_header_background_type_control', function (control) { /** * Run function on setting change of control. */ control.setting.bind(function (value) { switch (value) { /** * The select was switched to the hide option. */ case 'Plain': /** * Deactivate the conditional control. */ wp.customize.control('cto_header_background_color_control').activate(); wp.customize.control('cto_header_background_ggolor_one_control').deactivate(); wp.customize.control('cto_header_background_ggolor_two_control').deactivate(); break; /** * The select was switched to »show«. */ case 'Gradient': /** * Activate the conditional control. */ wp.customize.control('cto_header_background_color_control').deactivate(); wp.customize.control('cto_header_background_ggolor_one_control').activate(); wp.customize.control('cto_header_background_ggolor_two_control').activate(); break; } }); }); }); })();

@mrdulal

This comment has been minimized.

Copy link

commented Mar 19, 2018

Didn't work with toggle type. Tired a lot but still no luck.

@akramulhasan

This comment has been minimized.

Copy link

commented May 7, 2018

Same problem as CA-Irag

@thomastognacci

This comment has been minimized.

Copy link

commented Jun 29, 2018

Works well with checkboxes, but $wp_customize->add_setting must have 'transport' => 'postMessage' setting instead of the default 'transport' => 'refresh'

Detailed here: https://codex.wordpress.org/Theme_Customization_API#Part_3:_Configure_Live_Preview_.28Optional.29

@basterrika

This comment has been minimized.

Copy link

commented Jun 29, 2018

I would like to keep the refresh option. Would there be any possibility?

@amitbiswas06

This comment has been minimized.

Copy link

commented Aug 2, 2018

@CA-Irag and others who have faced the same problem is because of the lack of server side active_callback for the control. This jQuery only makes active/inactive on real time front end HTML. You also need to setup a active_callback for the desired control.

Here is more details on it - https://make.xwp.co/2016/07/24/dependently-contextual-customizer-controls/

@lwxbr

This comment has been minimized.

Copy link

commented Mar 18, 2019

Works once, then, when Customizer get refresh, the control appear again. Don't know how to solve this.

@lwxbr

This comment has been minimized.

Copy link

commented Mar 18, 2019

Found the solution, instead of use the method deactivate and activate, use toggle like this:

wp.customize.control('my_control', function (control) {

    const toggleControl = (value) => {

        if (condition) {
            wp.customize.control('control_to_hide').toggle(true);
        } else {
            wp.customize.control('control_to_hide').toggle(false);
        }
    };

    toggleControl(control.setting.get());
    control.setting.bind(toggleControl);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.