...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum