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
    Sep 2013
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question toggling div's doesn't work :(

    In my html coding I've got two div's and a checkbox.

    If the checkbox has been checked I want the first div (comments) to appear and the second div (comments2) to dissapear, if the checkbox has been unchecked I want it the other way around. Problem is that it doesn't function. Perhaps one of you experts can see what's going wrong ?

    Code:
    <script type="text/javascript">
    					function toggle(id) {
    						if (document.getElementById(id).style.display == 'none') {
    							document.getElementById(id).style.display = 'block';
    							document.getElementById('Comments2').style.display = 'none';
    						} else {
    							document.getElementById(id).style.display = 'none';
    							document.getElementById('Comments2').style.display = 'block';
    						}
    					}
    				</script>
    	
    
    				<table class="form">
    				<tr>
    				  
    				<td><input type="checkbox" onclick="toggle('Comments')"></td>
    				
    				
    				<div id="Comments">
    				<td><input type="text" name="value1" value="" size="20" /></td>
    				<td><input type="text" name="value2" value="" size="20" /></td>
    				</div>
    				
    				<div id="Comments2" style="display:none;">
    				<td>
    				 <select style="width:120px; margin-right:20px;">
    				<option value="mon">monday</option>
    				<option value="tue">tuesday</option>
    				</select>
    				</td>
    				</div>
    				
    				<td><input type="text" name="hoi" size="50"></td>
    				</table>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    
    function toggle(id) {
     var td3=document.getElementById(id)
     document.getElementById('td1').style.display=document.getElementById('td2').style.display = td3.style.display == 'none'?'none':'';
     td3.style.display =td3.style.display == 'none'?'':'none';
    }
    
    </script>
    
    
    				<table class="form">
    				<tr>
    
    				<td><input type="checkbox" onclick="toggle('td3')"></td>
    
    
    				<td id="td1" ><input type="text" name="value1" value="" size="20" /></td>
    				<td id="td2"><input type="text" name="value2" value="" size="20" /></td>
    
    				<td id="td3" style="display:none" >
    				 <select style="width:120px; margin-right:20px;">
    				<option value="mon">monday</option>
    				<option value="tue">tuesday</option>
    				</select>
    				</td>
    
    				<td><input type="text" name="hoi" size="50"></td>
    				</table>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Goliath (09-22-2013)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks!

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    One more question about this though

    Let's say I want to have the td with td3 visible when the page is loaded, and td1 and td2 hidden. How can I do that ?


  •  

    Posting Permissions

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