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 = [

        $.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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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