Question

I am having some trouble displaying a div on click using JQuery. All the code looks correct to me. On my website I have a searchbar that I am trying to add search suggestions to. But by default I would like it to be hidden. Only if the user selects “Show Suggestions”, then it will appear. The form action being empty is irrelevent. It does not work even if I remove the form all together. I am not getting any errors. I have been trying to fix this problem for over an hour, I appreciate any help with this.

HTML

<form action="">
    <input type="text" id="txt1" onkeyup="showHint(this.value)" />
    <input type="submit"  value="Search" /><button id="hint"/>Show Suggestions </button>
</form>

<div id="searchhint" style="display:none; border:1px solid red; width:300px;" > Suggestions:<span id="txtHint"></span></font></div> 

JQuery

$(document).ready(function(){
  $("#hint").click(function(){
    $("#searchhint").show();
  });
});

Answer 1

I forgot to load JQuery. I had JavaScript running on my page so I presumed JQuery should work as well, though I am aware that it MUST be loaded first in order for it to work. So to all of the people with a similar problem, first check if you loaded JQuery.

<script src="jquery.js"></script>