PDA

View Full Version : Help Needed with toggle



jilp
12-20-2006, 09:32 AM
Hello,
I need help from a javascript expert. I need to be able to toggle between selections form a select box. But it can only show one at a time, and hide the current one if a new one is selected. I came up with this code below. But it will not hide the current div, once a new div is selected. It will simply show both. Can anyone help me out with this?


<head>
<script type="text/javascript">
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>
</head>

<FORM NAME="myform">
<SELECT NAME="mylist" onChange="toggleLayer(document.myform.mylist.value)">
<OPTION VALUE="m1">1
<OPTION VALUE="m2">2
<OPTION VALUE="m3">3
</SELECT>
</FORM>

<div id="m1" style="display: none">
this is stuff M1</div>
<div id="m2" style="display: none">
this is stuff M2</div>
<div id="m3" style="display: none">
this is stuff M3</div>



Thank you for any assistance you can offer to me!

Ancora
12-20-2006, 02:20 PM
jilp:

Try this:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var prevDiv = "";

function toggle(nDiv){

if (nDiv == ""){return}
if (prevDiv != "")
{
document.getElementById(prevDiv).style.display = "none";
}
document.getElementById(nDiv).style.display = "";
prevDiv = nDiv;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:300px;margin:auto}
fieldset {width:300px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
select {font-family:tahoma;font-size:10pt;display:block;margin:auto}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<div id="m1" style="display:none">this is stuff M1</div>
<div id="m2" style="display:none">this is stuff M2</div>
<div id="m3" style="display:none">this is stuff M3</div>
<form method="post" action="">
<fieldset>
<legend>Toggle</legend>
<select name="divList" onchange="toggle(this.value)">
<option value=""> Make a Selection </option>
<option value="m1"> M1 </option>
<option value="m2"> M2 </option>
<option value="m3"> M3 </option>
</select>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

jilp
12-20-2006, 02:41 PM
:thumbsup: PERFECT!!!!!

WOW you even formatted my slop!

Thank you so much for taking your time to help me out! I appreciate it more than I can express!:thumbsup:

Ancora
12-20-2006, 02:55 PM
jilp:

You're welcome. I would appreciate being addressed by my name. It's people who post code here for others, not machines, agree?

Good luck with the remainder of your project.