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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide Element Help

    Ok here is my code:

    At the moment it show's the text by defult what I want is it hides the text by deafult and when you click it shows the text

    Any ideas on how I modify my code to do this?

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "DTD/xhtml1-frameset.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title> Project Diary</title>
    </head>
    
    <script language="Javascript">
    
      function dispHandle(obj) {
    	if (obj.style.display == "none")
    		obj.style.display = "";
    	else
    		obj.style.display = "none";
      }
    
     </script>
     
     <body>
     
     <a href="javascript:dispHandle(vanisher)">Hide Show</a>
     <div id=vanisher>Hello World!</div>
    
    <body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    What's with that doctype?
    Looks to me like you're using XHTML markup with little knowledge of what you're actually doing.
    Your code is all over the place; missing some bits, misplacing others.
    Your js appears as though you may only testing in the dreaded IE/Win, which is rarely a good idea.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Project Diary</title>
    	<script type="text/javascript">
    
    		window.onload = function() {
    		
    			dispHandle('vanisher');
    		
    		}
    
    		function dispHandle(objId) {
    
    			var obj = document.getElementById(objId);
    			obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
    
    		}
    
    	</script>
    </head>
    <body>
     
    <p>
    	<a href="#" onclick="dispHandle('vanisher')">Hide Show</a>
    </p>
    
    <p id="vanisher">
    	Hello World!
    </p>
    
    </body>
    </html>
    The above method doesn't separate behaviour from presentation (it uses js to directly set style properties).
    Still, I think you'd do well to get your head around this method before showing you how it should ideally be done.

    Be sure to use the validator to ensure that the code you're actually using is actually up to the quality it should be.



    p.s. ditch the xml declaration/prologue until you're actually serving the markup as application/xhtml+xml.
    If that statement goes over your head, then you're not ready yet.
    Last edited by Bill Posters; 05-06-2006 at 12:49 PM.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Yes, the main problem is that you do not use a correct reference of the object

    document.getElementById(id)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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