on checkbox change hide another div in Elementor — WordPress

Today this was a challenge for me my client. Actually, the client wants a div optional. If the user selected a box previously then the next box will appear else that box will hide automatically. And the whole thing should work with Elementor — WordPress.

form-design

I have designed this form using the Elementor kit. Now the main function is if any user checked Accommodation/Hotel/stay then another box will appear. Currently, that box is hidden.

the middlebox appeared

For this functionality, I have used Ajax and JavaScript. The code is like

<script>
$(document).ready(function(){
const collection = document.getElementsByClassName(“elementor-field-group-conditional”);
collection[0].style.display=”none”;

$(“#form-field-field_26a375e-0”).change(function(){
if(document.getElementById(“form-field-field_26a375e-0”).checked==true){
/* document.getElementById(“form-field-field_9081f8e-0”).style.display=”none”; */
const collection = document.getElementsByClassName(“elementor-field-group-conditional”);
collection[0].style.display=”block”;
} else {
const collection = document.getElementsByClassName(“elementor-field-group-conditional”);
collection[0].style.display=”none”;
}
});
});
</script>

And at the top position means header I have to use Ajax CDN to get ajax functionality.

editing window

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

And my code is working fine.