Hide/show customizer controls based on other settings in Customizer

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.

Read more here:: Hide/show customizer controls based on other settings in Customizer

Leave a Reply

Your email address will not be published. Required fields are marked *