Making a form disapear

Dev Shed Forums Sponsor:

November 19th, 2012, 04:04 PM

tyler_long_sim

Registered User

Join Date: Nov 2012

Posts: 13

Time spent in forums: 3 h 23 m 4 sec
Reputation 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).

November 19th, 2012, 04:34 PM

Catacaustic

Code Monkey V. 0.9

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Mar 2005

Location: A Land Down Under

Posts: 1,898

Time spent in forums: 2 Weeks 4 Days 19 h 7 m 36 sec
Reputation Power: 1798

The easy way is using jQuery. Look at jQuery's .slideUP() and .slideDown() functions.

November 19th, 2012, 05:15 PM

tyler_long_sim

Registered User

Join Date: Nov 2012

Posts: 13

Time spent in forums: 3 h 23 m 4 sec
Reputation Power: 0

Quote:

Originally Posted by Catacaustic

The easy way is using jQuery. Look at jQuery's .slideUP() and .slideDown() functions.

could i have a code example?

November 19th, 2012, 05:21 PM

Catacaustic

Code Monkey V. 0.9

Join Date: Mar 2005

Location: A Land Down Under

Posts: 1,898

Time spent in forums: 2 Weeks 4 Days 19 h 7 m 36 sec
Reputation Power: 1798

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??

November 20th, 2012, 09:28 PM

BarryG

Contributing User

Join Date: Aug 2011

Location: Sydney Australia

Posts: 134

Time spent in forums: 3 Days 10 h 2 m 37 sec
Reputation Power: 83

Quote:

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'

Making a form disapear

Developer Shed Advertisers and Affiliates