www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Showing/Hiding DIVs Trouble with previousSibling

  1. #1
    Join Date
    Jan 2009
    Location
    Ixonia, WI
    Posts
    56

    resolved [RESOLVED] Showing/Hiding DIVs Trouble with previousSibling

    This code shows and hides DIVs and it works great. I am having trouble adding code that will hide all other DIVs when you show another DIV. I'm trying to use previousSibling to hide the open DIV but I'm not able to get it to work. If there is a better way please tell me. Any suggestions will be greatly appreciated.

    Code:
    function showContent(vThis){
    	vParent = vThis.parentNode;
    	vSibling = vParent.nextSibling;
    	while (vSibling.nodeType==3) {
    		vSibling = vSibling.nextSibling;
    	};
    	if(vSibling.style.display == "none"){
    		vThis.src="images/collapse.gif";
    		vThis.alt = "hide";
    		vSibling.style.display = "block";
    	} else {
    		vSibling.style.display = "none";
    		vThis.src="images/expand.gif";
    		vThis.alt = "show";
    	}
    	return;
    }

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    Check out an earlier thread: here.

  3. #3
    Join Date
    Jan 2009
    Location
    Ixonia, WI
    Posts
    56
    Following your suggestion from the other post. I have modified the code so that it will toggle open when first clicked and close the second time it is clicked. And it will close all if more than one is open.
    Code:
    function hideAll() {
    	for (i=0; i < document.getElementsByTagName("span").length; i++){
    		document.getElementsByTagName("span")[i].style.display = 'none';
    		}
    
    }
        function showInfo(id) {
    		element =document.getElementById(id);
            if (element.style.display=="none"){
    		element.style.display = 'block';
    		}else{
    		hideAll();
    	//	document.getElementById(id).style.display ="none";
    		}
    		
            return false;
    
        }
    HTML Code:
    Then in the HTML I would do something like:
    
        <div>
    
            <a onclick="return showInfo('Google');">What is Google</a>
    
        </div>
        <div>
    
            <a onclick="return showInfo('Yahoo');">What is Yahoo</a>
    
        </div>
        <span id="Google" style="display:none">
    
            <div>Here would be some info about Google.</div>
            <a href="http://www.google.com">Go to Google</a>
    
        </span>
        <span id="Yahoo" style="display:none">
    
            <div>Here would be some info about Yahoo.</div>
            <a href="http://www.yahoo.com">Go to Yahoo</a>
    
        </span>
    But what I want to do is keep only one open at a time. If google is open and i click yahoo, I want google to close and yahoo to open and vice versa. Trying to figure out how to do this.

  4. #4
    Join Date
    Jan 2009
    Posts
    3,346
    The easiest way is to get the parentNode of the element you wish to show and hide all the children. Then show the one you wanted to show in the first place.

  5. #5
    Join Date
    Jan 2009
    Location
    Ixonia, WI
    Posts
    56
    Thanks for the input guys. Here is the code that works the way I need it to.

    Code:
    function hideAll(id) {
    	if (document.getElementById(id).style.display=="none"){
    		for (i=0; i < document.getElementsByTagName("span").length; i++){
    			document.getElementsByTagName("span")[i].style.display = 'none';
    			}
    	}else{
    	return;
    	}
    }
    function showInfo(id) {
    	hideAll(id);
    	element =document.getElementById(id);
        if (element.style.display=="none"){
    		element.style.display = 'block';
    	}else if (element.style.display=="block"){
    		hideAll(id);
    		element.style.display ="none";
    	}	
            return false;
    }
    HTML Code:
        <div>
    
            <a onclick="return showInfo('Google');">What is Google</a>
    
        </div>
        <div>
    
            <a onclick="return showInfo('Yahoo');">What is Yahoo</a>
    
        </div>
        <div>
    
            <a onclick="return showInfo('bing');">What is bing</a>
    
        </div>
        <span id="Google" style="display:none">
    
            <div>Here would be some info about Google.</div>
            <a href="http://www.google.com">Go to Google</a>
    
        </span>
        <span id="Yahoo" style="display:none">
    
            <div>Here would be some info about Yahoo.</div>
            <a href="http://www.yahoo.com">Go to Yahoo</a>
    
        </span>
        <span id="bing" style="display:none">
    
            <div>Here would be some info about bing.</div>
            <a href="http://www.bing.com">Go to bing</a>
    
        </span>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles