SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Los Angeles, CA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Concerning Hiding/Unhiding Div

    So, I picked up this JS script from one site or another awhile ago, but it turns out there are a few issues with it. Actually, one issue, and one thing I'd like to change. First the script:

    Code:
    JavaScript
    <script type="text/javascript" language="JavaScript">
    	// Show/Hide text
    
    		function displayHide(obj) {
    		var ele = document.getElementById(obj).style;
    			if (ele.display == "none")
    			ele.display = "block";
    		else
    			ele.display = "none";
    			return false;
    	}
    </script>
    
    ~*~
    
    HTML
    <a href="" onclick="return displayHide('hidden_ww');" class="reveal">Winter-Wish</a>
    
    ~*~
    
    CSS
    #hidden_ww {
    	display: none;
    }
       
    .unhidden {
    	border: 1px solid #969696;
    	padding: 1px 1px 1px 2px;
    	text-align: left;
    }
    Now, the issue:

    After loading or reloading the page, the first time you click any of the links, they won't actually reveal the div until the second click. After that, they work fine until the next reload. I'm sure it's an easyily fixed issue, but I have yet to get into JavaScript (though I intend to soon). And I figured I'd ask since I had another question, anyway:

    What would I need to add/change so that when I revealed one hidden div, it would automatically hide any other unhidden div?

    Thanks in advance.

  2. #2
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to get the "full" style of the element. element.style only contains the inline styles of the element.

    Code:
    	function displayHide(obj) {
    		var ele = document.getElementById(obj);
    		var style = ele.style;
    		var currentStyle = ele.currentStyle || window.getComputedStyle(ele, null);
    		if (currentStyle.display == "none")
    			style.display = "block";
    		else
    			style.display = "none";
    		return false;
    	}

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Los Angeles, CA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I copy/pasted that in place of what I used before, but every time I click one of the links the page just refreshes.

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a little more basic approach, which you might find useful:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
     <head>
     <title>Untitled</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <style type="text/css">
     div{height:300px;width:400px;display:none;}
     #divOne{display:block;background:#dee;}
     #divTwo{background:#eed;}
     #divThree{background:#ede;}
     </style>
     <script type="text/javascript">
     function showDiv(targDiv){
       var divs=document.getElementsByTagName('div');
       var divs_ln=divs.length;
       for(i=0;i<divs_ln;i++){
     	divs[i].style.display="none";
       }
       document.getElementById(targDiv).style.display="block";
     }
     </script>
     </head>
     <body>
     <p>
     <a href="#" onclick="showDiv('divOne');return false;">show one</a>
     <a href="#" onclick="showDiv('divTwo');return false;">show two</a>
     <a href="#" onclick="showDiv('divThree');return false;">show three</a>
     </p>
     <div id="divOne"></div>
     <div id="divTwo"></div>
     <div id="divThree"></div>
     </body>
     </html>


Bookmarks

Posting Permissions

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