Div not showing on click
<p>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. </p>

<p>HTML</p>

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

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

<p>JQuery</p>

<pre><code>$(document).ready(function(){
  $("#hint").click(function(){
    $("#searchhint").show();
  });
});
</code></pre>
