Hide/show customizer controls based on other settings in Customizer

by

This may be an easy one for those who know jquery.

So, I have two customizer controls.

First one is lmscore_improved_summary which is a checkbox.
And the second one is course_instructor_layout.

So what I want is to hide course_instructor_layout when lmscore_improved_summary is checked.

So this is the jquery code I am trying. 

(function( $ ) {
wp.customize.bind( 'ready', function() {

    var customize = this; // Customize object alias.
    customize( 'lmscore_improved_summary', function( value ) {


        var Controls = [
            'course_instructor_layout'
        ];

        $.each( Controls, 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 );
            } );
        } );

    } );
} );
})( jQuery );

But does exactly opposite to what I want. It shows course_instructor_layout when lmscore_improved_summary is checked.

I know a bit of javascript, but jquery is completely new for me.

Please help me.

1 Answer
1

you can define the conditional display on definition in PHP with somethign like that : 

$wp_customize->add_control("course_instructor_layout", [
    // ... other arguments
    "settings" => "course_instructor_layout",
    "active_callback" => function ($control) {
        return !$control->manager->get_setting("lmscore_improved_summary")->value();
    },
]);

if that doesn’t work in your case, edit your question to add the complete definition of lmscore_improved_summary and course_instructor_layout.

Leave a Comment