CODEWITHSUNDEEP
javascriptjquerywordpressaddclassremoveclass
antonio83
antonio83

Reputation: 454

Show hide custom metaboxes, live, with jQuery

I am trying to toggle the visibility of some custom meta boxes via jQuery. I managed to hide them by default and to make them visible when clicking on the correct post format.

I am not finding a solution for making the meta boxes disappear when the user changes the post format.

e.g. Default: Hidden Click on "Aside": Show Switching from "Aside" to any other post format: hide.

I have the following code:

jQuery(document).ready(function () {
    jQuery("#postbox-container-2").addClass("hidden");

    if (jQuery("input#post-format-video").is(':checked')) {
        jQuery("#postbox-container-2").removeClass("hidden");
    }

    jQuery("input#post-format-video").change(function () {

        if (jQuery(this).is(':checked')) {
            jQuery("#postbox-container-2").removeClass("hidden");
        }
    });

});

Any idea?

Different approach based on @zipp fiddle

Query(document).ready(function() {
    jQuery( "#postbox-container-2" ).hide();
    var toToggle='';
    jQuery('input#post-format-video').change(function() {
        if (toToggle){
        jQuery(toToggle).hide();
        }

            //alert(this.value+ " is checked");
            var selector='#postbox-container-2';
            jQuery(selector).toggle();     
            toToggle=selector;       
    });
});

even this one works fine but does not change live when I click on a different radio button

Upvotes: 0

Views: 757

Answers (1)

zipp
zipp

Reputation: 1126

Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.

//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
        //if we have a radio button selected previously we hide the div related
        if (toToggle){
        $(toToggle).hide();
        }
        //select the div we want to show
        var selector;
        if ($(this).attr('id')=='post-format-video'){
        selector='#postbox-container-2';
        }
        ...
        //show it (could have called toggle() )
        $(selector).show();
        //store it for the next selection     
        toToggle=selector;

Upvotes: 1

Related Questions