javascript: how to hide all and show one

[mylungsarempty]

I'm trying to write a script that basically says "if any one of these are selected, hide the rest".

//beginning of code
<SCRIPT type="text/javascript">
states=new Array()
states[0]="a"
states[1]="b"
states[2]="c"
states[3]="d"
states[4]="e"
states[5]="f"
states[6]="g"
</SCRIPT>

<DIV id="a" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
THIS IS LAYER A</DIV>

<DIV id="b" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR>THIS IS LAYER B</DIV>

<DIV id="c" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR><BR>THIS IS LAYER C</DIV>

<DIV id="d" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR><BR><BR>THIS IS LAYER D</DIV>

<DIV id="e" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR><BR><BR><BR>THIS IS LAYER E</DIV>

<DIV id="f" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR><BR><BR><BR><BR>THIS IS LAYER F</DIV>

<DIV id="g" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;">
<BR><BR><BR><BR><BR><BR>THIS IS LAYER G</DIV>
<!-end of code>

my question is, how exactly would i phrase it in javaScript, to say "when this function is called upon, hide all layers in the array. show this one layer".

[mylungsarempty]

forgetting to mention, i want to use a link to call the 'hide all layers except this one' function.

[MonkeeSage]

<SCRIPT type="text/javascript">
states=new Array()
states[0]="a"
states[1]="b"
states[2]="c"
states[3]="d"
states[4]="e"
states[5]="f"
states[6]="g"
 
function hideAllExcept(elm) {
 for (var i = 0; i < states.length; i++) {
 var layer = document.getElementById(states[i]);
 if (elm!= states[i]) {
 layer.style.display = "none";
 }
 else {
 layer.style.display = "block";
 }
 }
}
</SCRIPT>

Then on your divs add an onclick attribute like:

<DIV id="a" style="position: absolute; left: 75px; top: 40px; height: 400px; width: 450px; z-index: 2; visibility: visible;" onclick="hideAllExcept(this.id);">
THIS IS LAYER A</DIV>

Jordan

[mylungsarempty]

I'm not sure i understand... in include the onClick in the DIV tag? shouldn't it be within an anchor tag?

[MonkeeSage]

The onclick attribute can be set on any element you like, but you can also use it on separate anchors if that is better suited to your purpose. I understood you as saying that you wanted to be able to click on the layer itself and hide all the rest, but if that is not suitable you can make a button, use a link, even just have any arbitrary layer specifically for that reason.

There are only a few elements with special event attributes, but three that are globally applicable to all elements, AFAIK, are onclick, onmouseover and onmouseout. :)

Jordan

[mylungsarempty]

asdf

[MonkeeSage]

mylungsarempty:

No problem, I am happy to be able to help. If we all help each other then the web will be a better place. To quote a comment I found in some Perl source I was looking at the other day:

# Those who write software only for pay should go hurt some other field.
# - Erik Naggum

:)

All you need to do is single-quote the layer id you want to hide when you call the hideAllExcept() function. So for hiding all except "a", you just do,

<A HREF="#" onclick="hideAllExcept('a');">click to view layer a</A><BR>

...and for "b"...

<A HREF="#" onclick="hideAllExcept('b');">click to view layer a</A><BR>

...and so on. :)

Also, if you need it, here is a function to show all the layers again. You can just pop it in right under the other function:

function showAll() {
for (var i = 0; i < states.length; i++) {
var layer = document.getElementById(states[i]);
layer.style.display = "block";
}
}

And then this can be called like,

<A HREF="#" onclick="showAll();">click to view all layers</A><BR>

Keep at it , and remember, the only dumb questions are those that aren't asked. Work together, help each other, building the web one step at a time. That's how it's gotta be. :)

Jordan

[mylungsarempty]

Great googly moogly! Thankyou! This beautiful, i love it! I just sticky messaged you, but you can ignore that. Thankyou SO MUCH. i can FINALLY get some REAL work done on my site now that i've got this figured out. This is what each link looked link in my old code:

<a href="#" onclick="document.getElementById('one').style.visibility='hidden'; document.getElementById('two').style.visibility='hidden'; document.getElementById('three').style.visibility='hidden'; document.getElementById('four').style.visibility='hidden'; document.getElementById('five').style.visibility='hidden'; document.getElementById('six').style.visibility='hidden'; document.getElementById('seven').style.visibility='hidden'; document.getElementById('eight').style.visibility='hidden'; document.getElementById('nine').style.visibility='hidden'; document.getElementById('ten').style.visibility='hidden'; document.getElementById('eleven').style.visibility='visible'; document.getElementById('twelve').style.visibility='hidden'; document.getElementById('thirteen').style.visibility='hidden'; return false;">Store</a><BR><BR>

...and believe me, it was a pain any time i wanted to add a new layer. I am positively elated by this break through.

Infinitely thankful,
Kyle

[edited by: mylungsarempty at 4:49 am (utc) on Sep. 3, 2003]

[mylungsarempty]

# Those who write software only for pay should go hurt some other field.
# - Erik Naggum

great quote, by the way :)

[mylungsarempty]

hmm... one last thing... how would one go about setting all the layers but one to be hidden when the site loads? I notice that when i set visibility: hidden in the css in the DIV tag, the javascript function honors that. it 'displays' the div, but in it's hidden state. How can we get around this one?

Kyle

[MonkeeSage]

Kyle:

Right on. :)

You could also, do it slightly differently since you have a name attribute on the links now. Make things even more uniform,

<A HREF="#" name="a" onclick="hideAllExcept(this.name);">click to view layer a</A><BR>
<A HREF="#" name="b" onclick="hideAllExcept(this.name);">click to view layer b</A><BR>
<A HREF="#" name="c" onclick="hideAllExcept(this.name);">click to view layer c</A><BR>
...

The "this" object refers to the element you called the JavaScript from, and you can access any of the element's attributes by it (e.g., name, href, even the onclick attribute itself!). So "this.name" will give us "a", "b", "c" ... depending on which element the JavaScript is called from. :)

To get only one layer showing on page load is really simple actually, even though it seems like it would take a whole new function. JavaScript has an onload event that fires when the page is loaded, and we can take advantage of that here to do just what you need.

In the body element, just set an onload attribute and call the hideAllExcept function with the layer you want visible when the page loads, e.g.,

<body unload="hideAllExcept('a');">

That's it. :)

Jordan

[mylungsarempty]

Jordan, you are my hero.

[MonkeeSage]

LOL! *blush*

Well, you are my hero too for caring enough about your page to put in the time and energy to get it right instead of just buying some cookie-cutter, pre-made page from a catalogue. :)

Jordan