Question

I am using a script from this discussion: https://wordpress.stackexchange.com/a/14711/14649

It works great, but when I select a different radio input, the original box doesn’t toggle off (bad), but the new box does appear (good). This happens for any additional boxes I add.

jQuery is not my thing, and I have been researching around with no luck! Here is my code:

<script type='text/javascript'>
 jQuery(document).ready(function($) {
        $('#feature_box').hide();
        $('#standard_lead').hide();             

        // one box
        $('#value_feature_box').is(':checked') ? $("#feature_box").show() : $("#feature_box").hide();
        $('#value_feature_box').click(function() {
            $("#feature_box").toggle(this.checked);
        });

        // second box
        $('#value_standard_lead').is(':checked') ? $("#standard_lead").show() : $("#standard_lead").hide();
        $('#value_standard_lead').click(function() {
            $("#standard_lead").toggle(this.checked);
        });
    });
</script>

Thanks for taking a look!

Answer 1

The reason why the other box doesn’t disappear is because you didn’t tell it to!

$('#value_feature_box').click(function() {
    $("#feature_box").toggle(this.checked);
});

This says to toggle the visibility of #feature_box, when you click on #value_feature_box. If #value_feature_box is not a checkbox, then change the inner code to $("#feature_box").toggle();. If you want something to disappear as well, then tell it to:

$('#value_feature_box').click(function() {
    $("#feature_box").toggle();
    $("#standard_lead").toggle();
});

The value on the inside of the toggle() parentheses is telling it to either appear or disappear(true or false).