Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Needed with toggle

    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?
    Code:
    <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!

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    jilp:

    Try this:

    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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!

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •