Need help displaying & hiding multiple objects simultaneously - Javascript

"Severus Snape" <snape@hogwarts.edu> wrote in message
news:246203554kc1bgpf25v297tk3eb8o9pk7i@4ax.com...
> If someone could tell me where I'm going wrong with the code below,
> I'd greatly appreciate it. (Sorry for the cross-post on
> comp.lang.javascript, but nobody responded there).
>
> I can toggle the visibility of 1 object at a time in IE and Firefox,
> but can't do it on multiple objects simultaneously. The page loads
> with four or more tables that are hidden (using
> style="visibility:none") and above each table is an image that's an
> On/Off button. See page snippet at bottom.
>
> For example, 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 for some reason, the loop only
> runs twice. I've resisted using cookies because too many people block
> them.
>
>
> 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
> // I don't know wny the loop only runs twice -- I've 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[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.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 have the On/Off button 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)
>
> I also tried the html like this:
> <a href="javascript:;" onClick="toggleText('itemOne');">
> .....and also tried adding a "return true;" or "return false;" after
> the function.

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[i] ?
'inline' : 'none');
}

--
AKA "Dobbie The House Elf"

On Sat, 24 Mar 2007 14:34:33 GMT, "Wayne Dobson"
<nospam@noaddress.com> wrote:

>"Severus Snape" <snape@hogwarts.edu> wrote in message
>news:246203554kc1bgpf25v297tk3eb8o9pk7i@4ax.com...
>> If someone could tell me where I'm going wrong with the code below,
>> I'd greatly appreciate it. (Sorry for the cross-post on
>> comp.lang.javascript, but nobody responded there).
>>
>> I can toggle the visibility of 1 object at a time in IE and Firefox,
>> but can't do it on multiple objects simultaneously. The page loads
>> with four or more tables that are hidden (using
>> style="visibility:none") and above each table is an image that's an
>> On/Off button. See page snippet at bottom.
>>
>> For example, 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 for some reason, the loop only
>> runs twice. I've resisted using cookies because too many people block
>> them.
>>
>>
>> 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
>> // I don't know wny the loop only runs twice -- I've 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[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.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 have the On/Off button 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)
>>
>> I also tried the html like this:
>> <a href="javascript:;" onClick="toggleText('itemOne');">
>> .....and also tried adding a "return true;" or "return false;" after
>> the function.
>
>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[i] ?
>'inline' : 'none');
>}


Thanks for giving this a go. But it still doesn't quite work. I could
only get the loop to run by declaring the array the "old fasioned" way
as I did in the original. Also in the loop, I had to change the first
part of the statement back to "document.getElementById(toggleObj)..."

The real difficulty is that as the loop runs, it toggles the display
of the table I click a few times, then ends up with the display the
same as before I clicked it. Sticking the Alert statement in the loop
helped me see what was happening.

I modified your code to this:

<script type="text/javascript">
function toggleText(toggleObj){
var textStuff = new Array();
textStuff[0] = 'itemOne';
textStuff[1] = 'itemTwo';
textStuff[2] = 'itemThree';
textStuff[3] = 'itemFour';

for( var i = 0; i < textStuff.length ; i++ ){
document.getElementById(toggleObj).style.display = (toggleObj ==
textStuff[i] ? 'inline' : 'none');
alert(i);
}
}
</script>


If it makes it easier, here's the body of the page I tested with:

<body>
<p>Click something</p>
<p><a href="javascript:toggleText('itemOne')"><img src="button.gif"
width="50" height="50" border="0" /></a></p>
<table id="itemOne" style="display:none">
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
<p>&nbsp;</p>
<p><a href="javascript:toggleText('itemTwo')"><img src="button"
width="50" height="50" border="0" /></a></p>
<table id="itemTwo" style="display:inline">
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
<p>&nbsp;</p>
<p><a href="javascript:toggleText('itemThree')"><img src="button.gif"
width="50" height="50" border="0" /></a></p>
<table id="itemThree" style="display:none">
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
<p>&nbsp;</p>
<p><a href="javascript:toggleText('itemFour')"><img src="button.gif"
width="50" height="50" border="0" /></a></p>
<table id="itemFour" style="display:none">
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>

"Severus Snape" <snape@hogwarts.edu> wrote in message
news:e7kd03dq28o359ons4oc6qurmvgk16f1qv@4ax.com...
> On Sat, 24 Mar 2007 14:34:33 GMT, "Wayne Dobson"
> <nospam@noaddress.com> wrote:
>
>>"Severus Snape" <snape@hogwarts.edu> wrote in message
>>news:246203554kc1bgpf25v297tk3eb8o9pk7i@4ax.com...
>>> If someone could tell me where I'm going wrong with the code below,
>>> I'd greatly appreciate it. (Sorry for the cross-post on
>>> comp.lang.javascript, but nobody responded there).
>>>
>>> I can toggle the visibility of 1 object at a time in IE and Firefox,
>>> but can't do it on multiple objects simultaneously. The page loads
>>> with four or more tables that are hidden (using
>>> style="visibility:none") and above each table is an image that's an
>>> On/Off button. See page snippet at bottom.
>>>
>>> For example, 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 for some reason, the loop only
>>> runs twice. I've resisted using cookies because too many people block
>>> them.
>>>
>>>
>>> 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
>>> // I don't know wny the loop only runs twice -- I've 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[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.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 have the On/Off button 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)
>>>
>>> I also tried the html like this:
>>> <a href="javascript:;" onClick="toggleText('itemOne');">
>>> .....and also tried adding a "return true;" or "return false;" after
>>> the function.
>>
>>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[i]
>> ?
>>'inline' : 'none');
>>}
>
>
> Thanks for giving this a go. But it still doesn't quite work. I could
> only get the loop to run by declaring the array the "old fasioned" way
> as I did in the original. Also in the loop, I had to change the first
> part of the statement back to "document.getElementById(toggleObj)..."

Sorry, that was a typo. Try "textStuff[i]" in place of "toggleObj",
otherwise it won't loop through the tables.

> The real difficulty is that as the loop runs, it toggles the display
> of the table I click a few times, then ends up with the display the
> same as before I clicked it. Sticking the Alert statement in the loop
> helped me see what was happening.
>
> I modified your code to this:
>
> <script type="text/javascript">
> function toggleText(toggleObj){
> var textStuff = new Array();
> textStuff[0] = 'itemOne';
> textStuff[1] = 'itemTwo';
> textStuff[2] = 'itemThree';
> textStuff[3] = 'itemFour';

I don't think that should make a difference, but leave it that way until the
bug gets ironed out.

--
AKA "Dobbie The House Elf"

On Sun, 25 Mar 2007 20:55:04 GMT, "Wayne Dobson"
<nospam@noaddress.com> wrote:

>"Severus Snape" <snape@hogwarts.edu> wrote in message
>news:e7kd03dq28o359ons4oc6qurmvgk16f1qv@4ax.com...
>> On Sat, 24 Mar 2007 14:34:33 GMT, "Wayne Dobson"
>> <nospam@noaddress.com> wrote:
>>
>>>"Severus Snape" <snape@hogwarts.edu> wrote in message
>>>news:246203554kc1bgpf25v297tk3eb8o9pk7i@4ax.com...
>>>> If someone could tell me where I'm going wrong with the code below,
>>>> I'd greatly appreciate it. (Sorry for the cross-post on
>>>> comp.lang.javascript, but nobody responded there).
>>>>
>>>> I can toggle the visibility of 1 object at a time in IE and Firefox,
>>>> but can't do it on multiple objects simultaneously. The page loads
>>>> with four or more tables that are hidden (using
>>>> style="visibility:none") and above each table is an image that's an
>>>> On/Off button. See page snippet at bottom.
>>>>
>>>> For example, 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 for some reason, the loop only
>>>> runs twice. I've resisted using cookies because too many people block
>>>> them.
>>>>
>>>>
>>>> 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
>>>> // I don't know wny the loop only runs twice -- I've 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[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.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 have the On/Off button 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)
>>>>
>>>> I also tried the html like this:
>>>> <a href="javascript:;" onClick="toggleText('itemOne');">
>>>> .....and also tried adding a "return true;" or "return false;" after
>>>> the function.
>>>
>>>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[i]
>>> ?
>>>'inline' : 'none');
>>>}
>>
>>
>> Thanks for giving this a go. But it still doesn't quite work. I could
>> only get the loop to run by declaring the array the "old fasioned" way
>> as I did in the original. Also in the loop, I had to change the first
>> part of the statement back to "document.getElementById(toggleObj)..."
>
>Sorry, that was a typo. Try "textStuff[i]" in place of "toggleObj",
>otherwise it won't loop through the tables.
>
>> The real difficulty is that as the loop runs, it toggles the display
>> of the table I click a few times, then ends up with the display the
>> same as before I clicked it. Sticking the Alert statement in the loop
>> helped me see what was happening.
>>
>> I modified your code to this:
>>
>> <script type="text/javascript">
>> function toggleText(toggleObj){
>> var textStuff = new Array();
>> textStuff[0] = 'itemOne';
>> textStuff[1] = 'itemTwo';
>> textStuff[2] = 'itemThree';
>> textStuff[3] = 'itemFour';
>
>I don't think that should make a difference, but leave it that way until the
>bug gets ironed out.


Good Dobbie! Good Dobbie!

Your code did make sure that only 1 table is visible at a time.....but
it didn't hide a table that was already visible. There would always be
one table showing once you clicked. So I modified your if/then
statement, and now the code works *exactly* as I had wanted it:

function toggleText(toggleObj){
var textStuff = new Array();
textStuff[0] = 'itemOne';
textStuff[1] = 'itemTwo';
textStuff[2] = 'itemThree';
textStuff[3] = 'itemFour';

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

Thanks again!

--Snivelus

"Severus Snape" <snape@hogwarts.edu> wrote in message
news3ls03dro03029ah55d6admmgqcdru1jia@4ax.com...
> On Sun, 25 Mar 2007 20:55:04 GMT, "Wayne Dobson"
> <nospam@noaddress.com> wrote:
>
>>"Severus Snape" <snape@hogwarts.edu> wrote in message
>>news:e7kd03dq28o359ons4oc6qurmvgk16f1qv@4ax.com...
>>> On Sat, 24 Mar 2007 14:34:33 GMT, "Wayne Dobson"
>>> <nospam@noaddress.com> wrote:
>>>
>>>>"Severus Snape" <snape@hogwarts.edu> wrote in message
>>>>news:246203554kc1bgpf25v297tk3eb8o9pk7i@4ax.com...
>>>>> If someone could tell me where I'm going wrong with the code below,
>>>>> I'd greatly appreciate it. (Sorry for the cross-post on
>>>>> comp.lang.javascript, but nobody responded there).
>>>>>
>>>>> I can toggle the visibility of 1 object at a time in IE and Firefox,
>>>>> but can't do it on multiple objects simultaneously. The page loads
>>>>> with four or more tables that are hidden (using
>>>>> style="visibility:none") and above each table is an image that's an
>>>>> On/Off button. See page snippet at bottom.
>>>>>
>>>>> For example, 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 for some reason, the loop only
>>>>> runs twice. I've resisted using cookies because too many people block
>>>>> them.
>>>>>
>>>>>
>>>>> 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
>>>>> // I don't know wny the loop only runs twice -- I've 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[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.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 have the On/Off button 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)
>>>>>
>>>>> I also tried the html like this:
>>>>> <a href="javascript:;" onClick="toggleText('itemOne');">
>>>>> .....and also tried adding a "return true;" or "return false;" after
>>>>> the function.
>>>>
>>>>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[i]
>>>> ?
>>>>'inline' : 'none');
>>>>}
>>>
>>>
>>> Thanks for giving this a go. But it still doesn't quite work. I could
>>> only get the loop to run by declaring the array the "old fasioned" way
>>> as I did in the original. Also in the loop, I had to change the first
>>> part of the statement back to "document.getElementById(toggleObj)..."
>>
>>Sorry, that was a typo. Try "textStuff[i]" in place of "toggleObj",
>>otherwise it won't loop through the tables.
>>
>>> The real difficulty is that as the loop runs, it toggles the display
>>> of the table I click a few times, then ends up with the display the
>>> same as before I clicked it. Sticking the Alert statement in the loop
>>> helped me see what was happening.
>>>
>>> I modified your code to this:
>>>
>>> <script type="text/javascript">
>>> function toggleText(toggleObj){
>>> var textStuff = new Array();
>>> textStuff[0] = 'itemOne';
>>> textStuff[1] = 'itemTwo';
>>> textStuff[2] = 'itemThree';
>>> textStuff[3] = 'itemFour';
>>
>>I don't think that should make a difference, but leave it that way until
>>the
>>bug gets ironed out.
>
>
> Good Dobbie! Good Dobbie!
>
> Your code did make sure that only 1 table is visible at a time.....but
> it didn't hide a table that was already visible. There would always be
> one table showing once you clicked. So I modified your if/then
> statement, and now the code works *exactly* as I had wanted it:
>
> function toggleText(toggleObj){
> var textStuff = new Array();
> textStuff[0] = 'itemOne';
> textStuff[1] = 'itemTwo';
> textStuff[2] = 'itemThree';
> textStuff[3] = 'itemFour';
>
> for( var i = 0; i < textStuff.length ; i++ ){
> document.getElementById(textStuff[i]).style.display =
> (document.getElementById(toggleObj).style.display == 'inline' ? 'none'
> : (textStuff[i] == toggleObj ? 'inline' : 'none'));
> }
> }
>
> Thanks again!

Hey, glad to see you got it to work. I didn't read the requirements
properly, so I missed the bit about toggling. Anyway, glad to see that you
got it to work. Now you could try initiating the array using literal
notation, ie
(["itemOne","itemTwo", etc])

--
AKA "Dobbie The House Elf"