I’m trying to create a little snippet that will show/hide divs in my WordPress dashboard widgets depending on selected checkboxes. The code below works fine except for one thing – it doesn’t respect selected settings on dashboard load or widget update.

What’s important is that I may have several copies of the same widget, so each widget has to respect their own settings.

I would appreciate any advice…

function showHideOptions() {

var inputSelector = 'input:checkbox.show-options-checkbox';

jQuery(inputSelector).each( function( i ) {

    jQuery(this).on( 'change', function() {

        if ( this.checked ) {

            console.log( 'checkbox ' + i + ' is checked' );

            jQuery(this).parent().siblings( '.active-options' ).fadeIn().css( 'display', 'inline' );

        } else {

            console.log( 'checkbox ' + i + ' is unchecked' );

            jQuery(this).parent().siblings( '.active-options' ).fadeOut().css( 'display', 'none' );





jQuery(document).ready( function() { showHideOptions() } );
jQuery(document).on( 'widget-updated', function() { showHideOptions() } );

Read more here: Showing/hiding options on WP dashboard with jQuery


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: