Need help displaying/hiding multiple objects at once

[Severus Snape]

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(toggleObj) {
var myObj = document.getElementById(toggleObj); // 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.length; i++) {

// the array item we're currently looping on will get some tests
currObj = textStuff;

// 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.display != 'none') {
myObj.style.display = 'none';
}
// if it is hidden, unhide it
else {
myObj.style.display = '';
}

// if the current object is one we didn't click, then...
case != myObj.id:

// hide it, because we didn't click it
currObj.style.display = 'none';

} // end of switch
} // end of loop
} // end of function


I'm using it on the page this way:

<a href="javascript:toggleText('itemOne');">
<img src="button.gif" /></a>
<table id="itemOne" style="display:none">

(and 3 more like this further down the page with corresponding names)

 

[Wayne Dobson]

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(toggleObj) {
var myObj = document.getElementById(toggleObj); // 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.length; i++) {

// the array item we're currently looping on will get some tests
currObj = textStuff;

// 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.display != 'none') {
myObj.style.display = 'none';
}
// if it is hidden, unhide it
else {
myObj.style.display = '';
}

// if the current object is one we didn't click, then...
case != myObj.id:

// hide it, because we didn't click it
currObj.style.display = 'none';

} // end of switch
} // end of loop
} // end of function


I'm using it on the page this way:

<a href="javascript:toggleText('itemOne');">
<img src="button.gif" /></a>
<table id="itemOne" style="display:none">

(and 3 more like this further down the page with corresponding names)

 

[Wayne Dobson]

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(toggleObj) {
var myObj = document.getElementById(toggleObj); // 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.length; i++) {

// the array item we're currently looping on will get some tests
currObj = textStuff;

// 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.display != 'none') {
myObj.style.display = 'none';
}
// if it is hidden, unhide it
else {
myObj.style.display = '';
}

// if the current object is one we didn't click, then...
case != myObj.id:

// hide it, because we didn't click it
currObj.style.display = 'none';

} // end of switch
} // end of loop
} // end of function


I'm using it on the page this way:

<a href="javascript:toggleText('itemOne');">
<img src="button.gif" /></a>
<table id="itemOne" style="display:none">

(and 3 more like this further down the page with corresponding names)

The problem you have is one of a collection of tables, only one of which
should be visible at any one time, depending in which button has been
pressed. One way of doing it is simply turning all the relevant table's
visibility off, and the one table who's id matches the value passed, on - as
below:

function toggleText(toggleObj)
{
var textStuff = [ 'itemOne', 'itemTwo', 'itemThree', 'itemFour' ];

for( var i = 0; i < textStuff.length ; i++ )
document.getElementById(id).style.display = (toggleObj == textStuff ?
'inline' : 'none');
}