I followed a tutorial regarding how to hide/show Contact Form 7 fields using jQuery (in WordPress):
https://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery
I have used this before and it worked wonders. However, on a new site, for some reason, it isn’t working. The page in question is here:
http://saintsfoundation.co.uk/application-form-for-charitable-support/
The fields hide okay (as you will see), but don’t show when a field conditioned to show is clicked! Can anyone please help me to resolve this issue?
Thanks in advance!
Here’s the code:
HTML
<p>You are an employee or official representative of a charity or community group (i.e. you are not a third party raising funds on their behalf (required):<br />
[select* criteria-question-1 label_first include_blank "Yes" "No"] </p>
<p>The fundraising will benefit people in the Southampton and/or Hampshire area (required):<br />
[select* criteria-question-2 label_first id:form include_blank "Yes" "No"] </p>
<div class="hide" id="hide1">
<p>Name of organisation (required):<br />
[text* org-name placeholder "Enter organisation name here"] </p>
</div>
jQuery
$(document).ready(function() {
//Hide the field initially
$("#hide1").hide();
//Show the text field only when the third option is chosen - this doesn't
$('#form').change(function() {
if ($("#form").val() == "Yes") {
$("#hide1").show();
}
else {
$("#hide1").hide();
}
});
});