Harshith Thota Harshith Thota -3 years ago 114
CSS Question

Unable to display Form element after button click


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.

What I want to do:

  1. The form will be hidden by default.

  2. When a user hovers over an image button, the form should be shown and hidden after the mouseleave.

  3. If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.


  1. The objectives #1 and #2 from above are working as expected.

  2. As opposed to objective #3, the form automatically hides even after the button click.

Unsuccessful Methods:

  1. Using
    instead of

  2. Using
    to set

  3. Using
    hides the form after 500ms regardless of the button click.


Here's the link to my jsfiddle that you can use to test it out.


  1. For button click detection.

  2. For changing display property.

Answer Source

i have modified your code little bit please check with the fiddle

$('#dropbtn').click(function() {
  $(this).data('clicked', true);


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download