jquery to slide down – up the form- hidden by default for the first time

Mar 13, 2012   //   by phpfreelancer.biz   //   Blog, Jquery Tutorial  //  No Comments

I would like to not display the form until the user click the button but I fail to make it work, it displays by default when the page shows up

<div><input type="button" id="changePwd" value="Change your password"/></div>
<div id="form_pwd">          
    <form method="POST" action="google.com" id="pwdChange">
                <td width="175px"><label for="oldPwd">Enter your password</label></td>                
                <td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
                <td><label for="oldPwd_>"Re-enter your password</label></td>
                <td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
        <td></td><td><input type="submit" value="Save Password" /></td>


$("#changePwd" ).click(function () 
    if ($("#form_pwd").is(":show")) 


Simply use CSS to do this

<div id="form_pwd" style="display:none;">

This will hide your div element until the click event occurs upon which jquery will slide the element down and automatically remove the display none for you

Leave a comment

Share This Post

RSS Wordpress News