Hide/ Unhide sections on button click in elementor form - wordpress

Question

I am creating a form in elementor using the form, I have a radio button by clicking it, some of the fields should unhide. How do I achieve it?
Below is the screenshot

Answer 1

The first thing to do is to correctly name the IDs in your elementor form.
Please name radio button's ID with same_as_shipping_address.
And in CONTENT -> Options please write this:
Same as shipping address|same_as_shipping_address
Ohters options 1|other_option_1 /* You have to write your own option */
Elementor will then create an input that will have a selector:
input[name="form_fields[same_as_shipping_address]"]
Then for all the elements to hide when the radio button is selected, give them an ID with _show_if_same_as_shipping_address at the end.
For example for the phone (if it has to be hidden) the ID will be phone_number_show_if_same_as_shipping_address
Elementor will then create a div with it as a class:
.elementor-field-group-phone_number_show_if_same_as_shipping_address
Now the goal is to check each change of input[name="form_fields[same_as_shipping_address]"] and display the fields that have like an ID with _show_if_same_as_shipping_address at the end.
We are going to use a jQuery script to do this.
If you don't have child theme, create one and use this jQuery code:
jQuery(document).ready(function ($) {
var radio = $('input[name="form_fields[same_as_shipping_address');
var toToggle = $("div[class*=_show_if_same_as_shipping_address]");
/* By default */
onRadioChange();
/* Function triggered when the visitor changes the status of the sending address */
radio.on("change", function (e) {
onRadioChange();
});
/* Action to be carried out */
function onRadioChange() {
if (getRadioVal()=== "same_as_shipping_address") {
toToggle.css('display', 'flex');
}
else {
toToggle.css('display', 'none');
}
}
function getRadioVal() {
return $('input[name="form_fields[same_as_shipping_address:checked').val();
}
});