Show hide custom metaboxes, live, with jQuery

Question

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

take a look at the jquery .show(), .hide(), .toggle() method. It's hard to help without any fiddle or html source. — zipp, Aug 17 '14 at 00:22
Thank you very much for your reply zipp. The html source would be the WordPress admin panel, in the specific the post.php hook, it is a little long to post here, I understand your point though. Basically I need to check if a radio button is checked and if it is checked show a div (and that part work) but if i change from that radio button to another the div does not disappear, that's where I don't know what to do.. — antonio83, Aug 17 '14 at 01:08

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

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;

edited May 23 '17 at 12:11

Community

1
1

answered Aug 17 '14 at 01:59

zipp

1,116
13
27

Thank you very much for the time you are dedicating me. Your answer is great (I up voted) but unfortunately does not solve the problem, when I change checkbox the div remains visible, basically it works exactly like my example above, edit my question with your code modified with my id's just in case I did something wrong. – antonio83 Aug 17 '14 at 02:19
you do not need if (jQuery(this).is(':checked')). Try without. – zipp Aug 17 '14 at 02:24
@zipp please, SO is not in any relationship with jsfiddle.net, try always to paste the relevant code right into your question. – Roko C. Buljan Aug 17 '14 at 02:26
@zipp I removed it and it still works the same, thank you for the suggestion less code is always better. – antonio83 Aug 17 '14 at 02:39
@antonio83 the code you pasted from me is not working because your selector is only on #post-format-video therefore it won't be triggered when you select other radio input and you won't store the last id into 'toToggle'. RokoC.Buljan thank you for yor comment, I hope it is better now. – zipp Aug 17 '14 at 03:01
@zipp sorry for my late reply, had to run away. So basically I have to declare all the possible combination of radio button in order for it to work? jQuery does not automatically detect if the radio gets unchecked?.. Will try and post the results, Thanks again for your help – antonio83 Aug 17 '14 at 16:19
@antonio83 The change event only detect when it is checked. Therefore, your selector must be on all the radio button. You can do that by giving them the same name (i.e. my example) or a same class (selector would be like 'input:radio.myClass') and then select from it. – zipp Aug 17 '14 at 16:57

Show hide custom metaboxes, live, with jQuery

1 Answers1