[RESOLVED] Showing/Hiding DIVs Trouble with previousSibling

[kaiser0427]

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.

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;
}

[wbport]

Check out an earlier thread: here.

[kaiser0427]

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.

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;

    }

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.

[criterion9]

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.

[kaiser0427]

Thanks for the input guys. Here is the code that works the way I need it to.

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;
}

    <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>