473,324 Members | 2,257 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Need help displaying/hiding multiple objects at once

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[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'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)

Mar 19 '07 #1
2 1996
"Severus Snape" <sn***@hogwarts.eduwrote in message
news:ig********************************@4ax.com...
>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[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'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)


Mar 25 '07 #2
"Severus Snape" <sn***@hogwarts.eduwrote in message
news:ig********************************@4ax.com...
>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[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'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[i] ?
'inline' : 'none');
}

--
AKA "Dobbie The House Elf"
Mar 25 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Marc | last post by:
Hi all, I am trying to write an application where I need the ability to open an Excel spreadsheet and do basic read/write, insert rows, and hide/unhide rows. Using win32com I have been able to...
7
by: Ben Thomas | last post by:
Hi all, I'm having some trouble understanding the behavior of std::ostringstream. (I'm using Visual Studio .Net & STL port 4.5.3). I'll appreciate if someone can give me a little explanation of...
39
by: WindAndWaves | last post by:
Hi Gurus I have a page, which looks a bit like this: .... <body> <div ID=id1>................</DIV> <div ID=gsd>................</DIV> <div ID=ewd>................</DIV> <div...
5
by: Darius | last post by:
I'm writing here in hopes that someone can explain the difference between the new and virtual/override keywords in C#. Specifically, what is the difference between this: public class Window {...
2
by: darrel | last post by:
When showing/hiding items on the front end via codebehind, one normally just sets the object to runat='server' and then set's its visibility to false. This works fine. However, when I have a...
12
by: Noel | last post by:
Hello, I'm currently developing a web service that retrieves data from an employee table. I would like to send and retrieve a custom employee class to/from the webservice. I have currently coded...
92
by: Ray | last post by:
I just moved to another company that's mainly a Java/.NET shop. I was happy to find out that there's a movement from the grassroot to try to convince the boss to use a dynamic language for our...
9
by: pic078 via AccessMonster.com | last post by:
I need serious help - I have a frontend/backend Access database (2 MDE Files) that remains stuck in task manager after exiting the application - you can't reopen database after exiting as a result...
13
by: Eric IsWhoIAm | last post by:
I have four tables created so far: Courses, Instructors, Courses and Instructors (which shows the Course and Instructor Name fields, but holds their IDs since those are the keys), and Students....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.