I have a button that I need to change into a text field (Ideally expand into it using an animation) when clicked. Right now I have my button and text field beside each other on the page:
echo '<form id= "changePassForm" action="" method="post" enctype="multipart/form-data">';
echo '<div class="changePass">Change Password</div>';
echo '<div class="changePassBtn" method="post"></div>';
echo '<input type="password" placeholder="Password" name="password">';
echo '</form>';
I can set the password to hidden at start but I need to know how to make the changePass button "become" or expand into the password text field either using CSS or javascript. I'm new to javascript and am unsure how to accomplish this on button click.
How can I change a button to a text field on click? I need to be able to change back to the button afterwards