[RESOLVED] Need help with showing and hiding elements

[JEMdesigns]

Hello,
I am trying to using JavaScript to show and hide elements and a clients page. I have it set up that it with show the element by clicking a link and the same element hides by clicking another link that appears with the element. However what I also need now is if the element is visible and I click another link to display a new element, I want the first one to hide again.
I know that it is an 'if' statement; however I don't know what the code is. Can anyone help?
Thanks

[skywalker2208]

You need to check and see what state the element is in and then do the opposite.

if (element == 'none') {
    //set element to display
} else {
   // set element to not display set to none.
}

[JEMdesigns]

That is what I thought hope when I put it in it doesn't seem to work.
This is what I have for code:

function showStuff(id) {
if (element == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}

....
<li><a href="#" onclick="showStuff('xp'); return false;">Introduction to Windows XP</a></li>
<li><a href="#" onclick="showStuff('vista'); return false;">Introduction to Windows Vista</a></li>
....
<span id="xp" style="display: none;">
<p>Windows XP is an operating system that allows you to access other programs
on the computer. This course is a beginner level course that teaches students
how to navigate inside the operating system, manage files and general functions
of the operating system.<a href="#" onclick="hideStuff('xp'); return false;">Close</a></p>
</span>
<span id="vista" style="display: none;">
<p>Windows Vista was released between Windows XP and Windows 7 the latest operating system. A beginner level course that teaches students how to navigate inside the operating system, manage files and general functions of the operating system.<a href="#" onclick="hideStuff('vista'); return false;">Close</a></p>
</span>

[skywalker2208]

I guess my explanation wasn't very good.


You need to get the element style and check its value first.

function showStuff(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}

[JEMdesigns]

Okay so that does it for that link, but what about if I click on another link, how do I make the old on vanish.
So for example if I first click on Windows XP and it displays the info for it. So what I want to do is when I click on the Windows Vista, the Xp info hides and the Vista info displays.

[elbaz]

I would use the following two JavaScript functions to hide and show the elemets:

function hideAllInfo() {
var aSpans = document.getElementsByTagName("span");

for (i = 0; i < aSpans.length; i++) {

aSpans[i].style.display = 'none';

}

}
function showInfo(id) {

hideAllInfo();
document.getElementById(id).style.display = 'block';
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>

When you click on a link the first thing the showInfo function does is call the hideAllInfo function. The hideAllInfo function resets all the information areas back to non-display. showInfo then sets the selected areas display property so it will display. The nice thing about this approch is that you can add as many links and information areas as you want without having to change the JavaScript code.

[omnicity]

One more little thing that you need to be aware of, is that the first time you try to read

style.display

it will probably be empty, so you need to pay attention to your initial state.

[JEMdesigns]

Thanks elbaz! That was exactly what I was looking for.

[rnd me]

Originally Posted by omnicity

One more little thing that you need to be aware of, is that the first time you try to read

style.display

it will probably be empty, so you need to pay attention to your initial state.

if you use "" instead of "block", you can ignore the initial state, and not screw up thing like table cells, links, and others that look funky with display:block;

function showInfo(id) {
    hideAllInfo();
    return document.getElementById(id).style.display = '';
}

[wbport]

I saw this in a Sudoku solver. SetPage is called with the div to be displayed and showPage either displays or hides the divisions.

function showPage(sPage, bShow)
{
	var div = document.getElementById(sPage);
	div.style.visibility = bShow ? 'visible' : 'hidden';
	div.style.position = bShow ? 'static' : 'absolute';
}
function setPage(sPage)
{
	showPage('start', sPage == 'start');
	showPage('details', sPage == 'details');
	showPage('solver', sPage == 'solver');
	showPage('about', sPage == 'about');
}