title: Unable to display Form element after button click
body: <h3>Problem:</h3>
  <p>I'm trying to implement a dropdown form from a button. However, I'm having issues with the form not staying visible even after the condition is met. I'm new to javascript and css, so bear with me if it's a silly error. Thanks in advance.</p>
  <hr />
  <h3>What I want to do:</h3>
  <blockquote>
  <ol>
  <li>The form will be hidden by default.</li>
  <li>When a user hovers over an image button, the form should be shown and hidden after the mouseleave.</li>
  <li>If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.</li>
  </ol>
  </blockquote>
  <hr />
  <h3>Observation:</h3>
  <blockquote>
  <ol>
  <li>The objectives #1 and #2 from above are working as expected.</li>
  <li>As opposed to objective #3, the form automatically hides even after the button click.</li>
  </ol>
  </blockquote>
  <hr />
  <h3>Unsuccessful Methods:</h3>
  <blockquote>
  <ol>
  <li>Using <code>.show()</code> instead of <code>.css(&quot;display&quot;,&quot;block&quot;)</code></li>
  <li>Using <code>form:hover</code> to set <code>display:block</code>.</li>
  <li>Using <code>setTimeout(hide_function,500)</code> hides the form after 500ms regardless of the button click.</li>
  </ol>
  </blockquote>
  <hr />
  <h3>Code:</h3>
  <p>Here's the link to my <a href="https://jsfiddle.net/d3h8gvek/" rel="nofollow noreferrer">jsfiddle</a> that you can use to test it out.</p>
  <hr />
  <h3>References:</h3>
  <blockquote>
  <ol>
  <li>For <a href="https://stackoverflow.com/questions/6081608/jquery-check-if-it-is-clicked-or-not">button click detection</a>.</li>
  <li>For <a href="https://stackoverflow.com/questions/12194435/cannot-set-property-display-of-undefined">changing display property</a>.</li>
  </ol>
  </blockquote>