#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    13
    Rep Power
    0

    Making a form disapear


    how can you make it so a form disappears when you click a button and the contents underneath the form rises up to the top(to where the form was).
  2. #2
  3. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,066
    Rep Power
    1990
    The easy way is using jQuery. Look at jQuery's .slideUP() and .slideDown() functions.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    13
    Rep Power
    0
    Originally Posted by Catacaustic
    The easy way is using jQuery. Look at jQuery's .slideUP() and .slideDown() functions.
    could i have a code example?
  6. #4
  7. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,066
    Rep Power
    1990
    Sure. There's a lot on the jQuery website . All you have to do is put in a tiny amount of effort to search for them yourself.

    Comments on this post

    • sir_drinxalot agrees : yeah but where is the fun in that??
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    Sydney Australia
    Posts
    178
    Rep Power
    83
    Originally Posted by tyler_long_sim
    could i have a code example?
    Here you go, without jQuery.

    Code:
    <!doctype html>
    
    <html>
    <head>
    <title>Disappearing form</title>
    <script type='text/javascript'>
    function toggle_hide(element) {
    	if ( document.getElementById(element).className == "visible") {
    		document.getElementById(element).className = "invisible";
    		}
    	else {
    		document.getElementById(element).className = "visible";
    	}
    	}
    </script>
    <style type='text/css'>
    .visible {
    	display:block;
    	}
    .invisible {
    	display:none;
    	}
    </style>
    
    </head>
    <body>
    <form method='post' action='#' id='form1' name='form1' class="visible">
    <input type="text" size='10' value="text input">
    </form>
    <form method='post' action='#' id='form2' name='form2'>
    <input type='button' value="Toggle form" onclick='toggle_hide("form1")'>
    </form>
    </body>
    </html>
    Click the "Toggle form" button to hide/unhide the form called 'form1'

IMN logo majestic logo threadwatch logo seochat tools logo