I can display and hide 1 object at a time, but haven't seen it done on
multiple objects simultaneously. I have four (or more) tables on a
page that start off hidden, and I want to toggle their visibility --
but have only one table visible at any time.
If I click button #1, table #1 should toggle visibility and all other
tables should remain hidden. If table #1 is visible and I click button
#3, table #1 becomes hidden and table #3 becomes visible.
My code loops through an array, but the loop only runs twice. I've
resisted using cookies because too many people block them. If someone
could tell me where I'm going wrong with this code, I'd greatly
appreciate it.
function toggleText(togg leObj) {
var myObj = document.getEle mentById(toggle Obj); // what we click
var currObj; // this gets used in the loop
var i;
// create an array item for each table we want to toggle
var textStuff = new Array();
textStuff[0]= 'itemOne';
textStuff[1]= 'itemTwo';
textStuff[2]= 'itemThree';
textStuff[3]= 'itemFour';
// loop through the array to look at each object on the page
// right now, the loop only runs twice -- I tested it with Alerts
for(i = 0; i<textStuff.len gth; i++) {
// the array item we're currently looping on will get some tests
currObj = textStuff[i];
// find the value of the object in the current loop
switch(currObj) {
// if the current object is the one we just clicked, then...
case myObj.id:
// if it isn't hidden, hide it
if (myObj.style.di splay != 'none') {
myObj.style.dis play = 'none';
}
// if it is hidden, unhide it
else {
myObj.style.dis play = '';
}
// if the current object is one we didn't click, then...
case != myObj.id:
// hide it, because we didn't click it
currObj.style.d isplay = 'none';
} // end of switch
} // end of loop
} // end of function
I'm using it on the page this way:
<a href="javascrip t:toggleText('i temOne');">
<img src="button.gif " /></a>
<table id="itemOne" style="display: none">
(and 3 more like this further down the page with corresponding names)
