jQuery: Show div on click brings up not definied error

Question

Got a Gravity Form within WordPress that has some paragraph fields that are hidden on page load and I have a text link that when clicked should show these fields.

Every time I try to run the script though, console comes back and says $ is not defined. Actually if I use $ or jQuery, the same error appears. No win.

Puzzled how to use this code then. Really simple and should work from all the examples I see.

$(document).ready(function(){
  $("#form-click").click(function(){
    $("#field_1_16").show();
    $("#field_1_17").show();
    $("#field_1_18").show();
  });
});

if you want to use your jquery snippet you should wrap it in an IIFE `(function ($) {/*your code*/})(jQuery || $);` — Lawrence Cherone, Feb 19 '22 at 01:33
I have the code right before the closing body tag and even using the IIFE, I still get a jQuery is not defined error. — Adam Bell, Feb 19 '22 at 18:05

score 0 · Accepted Answer · answered Feb 19 '22 at 01:28

0

$ / jquery is not defined means jquery hasn't loaded yet. Be sure to include your script after the jquery include scripts.

You could try replacing your current code with javascript in the same scripts tag;

document.getElementById("form-click").addEventListener("click", function(){
   document.getElementById("field_1_16").style.display = 'block';
});

answered Feb 19 '22 at 01:28

Jerdine Sabio

5,688
2
11
23

This worked. The only issue and it's no fault of Jerdine's was when Gravity Forms hides something, they use visibility instead of display. No biggie. – Adam Bell Feb 19 '22 at 19:27

jQuery: Show div on click brings up not definied error

1 Answers1