DIV show/hide

**acctman** · 02-28-2008, 05:57 AM

Hi, i'm looking for a piece of coding that will allow me to have two images (male and female image) and when a user click Male... below it will appear Male input information and if the Female image is clicked female input information is shown. example below. if i click image 1 the form info for image1 appears if i decide to click image 2 then image1 info hides and image2 info appears.

Image 1 - Image 2

----------border-------------
Information appears below

You've selected Image 1
user: name
pass: 1234

**rangana** · 02-28-2008, 06:29 AM

...something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    padding:0;
    height:100%;
 }
#change
{
margin:10px auto auto 0;border:1px solid #000; background:#efefff; width:200px;
text-align:center;
height:100px;
}
</style>
<script type="text/javascript">
function male()
{
document.getElementById("change").innerHTML = "This is the male form<form name=\"form1\" method=\"POST\"><input type=\"text\"><br/><input type=\"submit\" value=\"Male\"><br/>"
}
function female()
{
document.getElementById("change").innerHTML = "This is the female form<form name=\"form1\" method=\"POST\"><input type=\"text\"><input type=\"submit\" value=\"Female\"><br/>"
}
</script>
</head>
<body>
<a href="#"><img src="male.jpg" onClick="male()" border="0"></a>
<a href="#"><img src="female.jpg" onClick="female()" border="0"></a>
<div id="change">
This area will show the forms selected
</div>
</body>
</html>

See if it helps

**acctman** · 02-28-2008, 09:15 PM

perfect example, thanks so much

**acctman** · 02-28-2008, 10:40 PM

question, is there a way to put the innerhtml code load from a div? because my forms are pretty long and it would take a while to get everything formated to work within the javascript. it seems to work perfect for small code snipets.

**rangana** · 02-29-2008, 12:07 AM

We could change the code,..we'll use the display property of CSS instead of innerHTML. See this code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    padding:0;
    height:100%;
 }
#change
{
margin:10px auto auto 0;border:1px solid #000; background:#efefff; width:200px;
text-align:center;
height:100px;
}
#male,#female{
margin:1px auto;
background:#efefff;
width:200px;
padding:5px;
height:100px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById("male").style.display = 'none';
document.getElementById("female").style.display = 'none';
}
function male()
{
document.getElementById("male").style.display = '';
document.getElementById("female").style.display = 'none';
}
function female()
{
document.getElementById("female").style.display = '';
document.getElementById("male").style.display = 'none';
}
</script>
</head>
<body>
<a href="#"><img src="male.jpg" onClick="male(); return false" border="0"></a>
<a href="#"><img src="female.jpg" onClick="female(); return false" border="0"></a>
<div id="male">
This is the male form
<form name="form1" method="POST"><input type="text"><br/><input type="submit" value="Male"><br/>
</div>
<div id="female">
This is the female form<form name="form1" method="POST"><input type="text"><input type="submit" value="Female"><br/>
</div>
</body>
</html>

See if it helps

**acctman** · 02-29-2008, 10:18 PM

thank that worked perfectly

**rangana** · 03-01-2008, 01:37 AM

You're welcome!..Glad I could help

Thread: DIV show/hide

Thread Tools

Search Thread

DIV show/hide

Bookmarks

Bookmarks

Posting Permissions