Harshith Thota Harshith Thota - 2 years ago 72
CSS Question

Unable to display Form element after button click

Problem:



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.







Observation:





  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
    .show()
    instead of
    .css("display","block")

  2. Using
    form:hover
    to set
    display:block
    .

  3. Using
    setTimeout(hide_function,500)
    hides the form after 500ms regardless of the button click.







Code:



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




References:





  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);
  $('#loginForm').addClass('activate');
});

https://jsfiddle.net/d3h8gvek/2/

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