Wordpress/Gravity Forms - How to show/hide items based on a radio button being checked?

Question

I'm attempting to show/hide a div based on input in the radio button field within a gravity form. I found an answer using jQuery here which works perfectly for checkboxes, however, when I try to do this same thing with a radio button it will do the first part and hide the div once selected, but it won't show the div again once the radio button is unselected.

This is the jQuery that I'm working with:

jQuery(function ($) {
   var trigger = $('#choice_13_1_0');
   trigger.change(function(){
       if ( $(this).is(":checked") ) {
           jQuery(".conditional-display").hide();
       } else {
           jQuery(".conditional-display").show();
       }
   });
});

This is the HTML that Gravity forms produces:

<ul class="gfield_radio" id="input_13_1">
<li class="gchoice_13_1_0">
    <input name="input_1" type="radio" value="Option One" id="choice_13_1_0" tabindex="1">
    <label for="choice_13_1_0" id="label_13_1_0">
        Option One
    </label>
</li>
<li class="gchoice_13_1_1">
    <input name="input_1" type="radio" value="Option Two" id="choice_13_1_1" tabindex="2">
    <label for="choice_13_1_1" id="label_13_1_1">
        Option Two
    </label>
</li>
<li class="gchoice_13_1_2">
    <input name="input_1" type="radio" value="Option Three" id="choice_13_1_2" tabindex="3">
    <label for="choice_13_1_2" id="label_13_1_2">
        Option Three
    </label>
</li>

And I have this div placed elsewhere on the page:

<div class="conditional-display">
    Content to conditionally display based on radio field selection
</div>

In this example what should happen is that the div will be hidden when option one is selected and then show again when option two or three are selected.

When,exactly, do you want the conditional div to be visible or not? — Jon P

Jon P Jon P · Accepted Answer · 2020-11-09T06:07:51

Assuming you want the conditional div to be hidden when the first radio button is clicked...

Add the event handler to the group of radio buttons by name. Then use toggle with a condition to determine if the div is visible or not.

jQuery(function ($) {
   var trigger = $('[name=input_1]');
   trigger.change(function(){
       jQuery(".conditional-display").toggle(this.id !== "choice_13_1_0")       
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="gfield_radio" id="input_13_1">
<li class="gchoice_13_1_0">
    <input name="input_1" type="radio" value="Option One" id="choice_13_1_0" tabindex="1">
    <label for="choice_13_1_0" id="label_13_1_0">
        Option One
    </label>
</li>
<li class="gchoice_13_1_1">
    <input name="input_1" type="radio" value="Option Two" id="choice_13_1_1" tabindex="2">
    <label for="choice_13_1_1" id="label_13_1_1">
        Option Two
    </label>
</li>
<li class="gchoice_13_1_2">
    <input name="input_1" type="radio" value="Option Three" id="choice_13_1_2" tabindex="3">
    <label for="choice_13_1_2" id="label_13_1_2">
        Option Three
    </label>
</li>


<div class="conditional-display">
    Content to conditionally display based on radio field selection
</div>

Wordpress/Gravity Forms - How to show/hide items based on a radio button being checked?

1 Answers