/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Showing/Hiding DIVs Trouble with previousSibling

Copy linkTweet thisAlerts:
Jun 03.2010

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;
}[/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@wbportJun 04.2010 — Check out an earlier thread: here.
Copy linkTweet thisAlerts:
@kaiser0427authorJun 04.2010 — 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;

}
[/CODE]
[code=html]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>
[/code]
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.
Copy linkTweet thisAlerts:
@criterion9Jun 04.2010 — 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.
Copy linkTweet thisAlerts:
@kaiser0427authorJun 04.2010 — 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;
}
[/CODE]
[code=html] <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>
[/code]
×

Success!

Help @kaiser0427 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...