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();
  });
});

Answer 1

$ / 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';
});