I am using code below to toggle customizer controls, but not sure how to toggle Panel/Sections in the same way? Any one can help me please.

wp.customize.bind( 'ready', function() { // Ready?
    var customize = this; // Customize object alias.
    customize( 'display_blogname', function( value ) {

        // ...previous codes...

        var colorControls = [

        $.each( colorControls, function( index, id ) {
            customize.control( id, function( control ) {
                 * Toggling function
                var toggle = function( to ) {
                    control.toggle( to );

                // 1. On loading.
                toggle( value.get() );

                // 2. On value change.
                value.bind( toggle );
            } );
        } );
    } );
} );

You should not be using jQuery toggle. This is directly manipulating the visibility of DOM elements. Instead, you should be using the active state for the control, section, or panel. You can hide a control via control.active.set(false). You can do the same for a panel or section. See some more examples in my post Dependently-Contextual Customizer Controls. See also my answer at https://wordpress.stackexchange.com/a/286294/8521

To do the same with a panel or section, you'd do:

wp.customize.panel( 'idOfPanel', function( panel ) {
    panel.active.set( false ); // Hide it.
    // ...
} );

wp.customize.section( 'idOfSection', function( section ) {
    section.active.set( true ); // Show it.
    // ...
} );

In the “...” you'd probably want to also override the validate method on the active state to force to have a certain value so that when the Customizer preview refreshes, the active_callback doesn't override what you set in JS.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.