**UNRESOLVED** How to hide & unhide tables from OnClick?

[Salvatore]

I have an HTML page which at present is opening a different browser window for each link...so for example the HTML page has Link 1 that opens a page of graphs.....and Link 2 opens a page of data...etc

I am looking to put these graphs & tables on the same page but hide them all, and only show the appropriate table once that specific link has been clicked...

So is this possible, and if so, could someone help a newbie out with getting me started??

Thank you all...

[RealisticGraphics]

Try something like this:

<script language="JavaScript1.2">
function ShowIt(i_Name){
	if(i_Name == "i_graph"){
		document.all.i_graph.style.visibility = "visible"
		document.all.i_data.style.visibility = "hidden"
	} else {
		document.all.i_graph.style.visibility = "hidden"
		document.all.i_data.style.visibility = "visible"
	}
}
</script>
<a href="javascript: ShowIt('i_graph')">Show Graph</a> | <a href="javascript: ShowIt('i_data')">Show Data</a><br>
<div id="i_graph" style="visibility: hidden; position:absolute">
<table bgcolor="red"><td>Test 1</td></table>
</div>

<div id="i_data" style="visibility: hidden">
<table bgcolor="blue"><td>Test 2</td></table>
</div>

[Salvatore]

I really appreciate your response!

I have a questions or two if you don't mind?

With regards to this function you sent me, I will have several data pages and a few graph pages....do I label them within the function?

For example you have -

if(i_Name == "i_graph"){
        document.all.i_graph.style.visibility = "visible"
        document.all.i_data.style.visibility = "hidden"
    } else {
        document.all.i_graph.style.visibility = "hidden"
        document.all.i_data.style.visibility = "visible"

Will I need to create individual If statements within this function for each page I wanted hidden?

Also, I need the data or graph to show in the same position, much like a window on the page that will show the information...how do I write the position piece...

I hope that I have explained myself...I thank you for your time and consideration!

[RealisticGraphics]

This might work better for you then. I've made a few changes such as it now loops through each "DIV" tag for you so you don't have to mess with the "if" statements. I also changed the style attribute to "display" instead of "visibility" this should take care of your positioning issues. Note that this only works in IE as far as I know, maybe the newest netscape (not sure if it supports "div" tags).

Let me know if you have any questions or need any more help.

<script language="JavaScript1.2">

function ShowIt(i_Name){

var a_Divs = document.all.tags("div")

for(i=0;i<a_Divs.length;i++){
	if(a_Divs[i].id != i_Name){
		document.all[a_Divs[i].id].style.display = "none"
	} else {
		document.all[a_Divs[i].id].style.display = "block"
	}
}

}
</script>
<a href="javascript: ShowIt('i_graph')">Show Graph</a> | <a href="javascript: ShowIt('i_data')">Show Data</a><br>
<div id="i_graph" style="display: none">
<table bgcolor="red"><td>Test 1</td></table>
</div>

<div id="i_data" style="display: none">
<table bgcolor="blue"><td>Test 2</td></table>
</div>

[Salvatore]

THIS IS GREAT!!!

I really am learning alot....but I still need a little more prodding to the old brain!

Ok, this is the code I am currently using...it uses a hide function for a menu style I have...My question is:
Can I incorporate the function you created into this code...meaning can I use the DIV tags from my code to
be used in your function...or am I way off

<Script Language="VBscript">
<!--
Option Explicit
DIM menuID,menuObj,cellBk
SUB ShowHide(menuID)
menuObj = "Link" & menuID
cellbk = "Head" & menuID
// CHECK IF OPEN
if document.all.item(menuObj).className = "LINKSON" then    'IF MENU OPEN THEN CLOSE
document.all.item(menuObj).className = "LINKSOFF"
document.all.item(cellBk).style.backgroundColor = "990000"   ' SET CELL BACKGROUND COLOUR BLUE           
ELSE
document.all.item(menuObj).className = "LINKSON"               ' OPEN MENU   
document.all.item(cellBk).style.backgroundColor = "0066cc"  ' SET CELL BACKGROUND COLOUR RED           
END IF
END SUB
-->
</Script>
</head>
<body onload="WRITERPUBLISHER()">
<p align="center"><img name="DIRECT BANKING-MAINQUALITY STATS TITLE" src="/intranet/icmimagelib.nsf/vwImages_Lkp/DIRECT+BANKING-MAINQUALITY+STATS+TITLE/$FILE/QltyStats.jpg?OpenElement" border="0"></img>
</p>
<center><font size=3><font color="cc0000"><b>Grade of Service Targets</b></font></center><P>
<p align="center">
<table>
<td ID="head3" ALIGN="left" width="275" height="15" CLASS="HEADING" ONCLICK="ShowHide(3)"><img name="DIRECT BANKING-MAINANIMATED BALL" src="/intranet/icmimagelib.nsf/vwImages_Lkp/DIRECT+BANKING-MAINANIMATED+BALL/$FILE/Aniball1.gif?OpenElement" border="0"></img>Credit Card Auth 95/30</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 3 -->
<div ID="Link3" CLASS="LINKSOFF">
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4L4M?OpenDocument"><b>Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q7PJF?OpenDocument"><b>Graphs</b></a><br>
</div>
</td>
</tr>
 
<td ID="head4" ALIGN="left" width="275" height="15" CLASS="HEADING" ONCLICK="ShowHide(4)"><img name="DIRECT BANKING-MAINANIMATED BALL" src="/intranet/icmimagelib.nsf/vwImages_Lkp/DIRECT+BANKING-MAINANIMATED+BALL/$FILE/Aniball1.gif?OpenElement" border="0"></img>Premier 90/20</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 4 -->
<div ID="Link4" CLASS="LINKSOFF">
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4LK3?OpenDocument"><b>Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q7Q23?OpenDocument"><b>Graphs</b></a><br>
</div>
</td>
</tr>
<p>
<td ID="head2" ALIGN="left" width="275" height="15" CLASS="HEADING" ONCLICK="ShowHide(2)"><img name="DIRECT BANKING-MAINANIMATED BALL" src="/intranet/icmimagelib.nsf/vwImages_Lkp/DIRECT+BANKING-MAINANIMATED+BALL/$FILE/Aniball1.gif?OpenElement" border="0"></img>Priority 80/30</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 2 -->
<div ID="Link2" CLASS="LINKSOFF">
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4LRU?OpenDocument"><b>Combined Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q7QE8?OpenDocument"><b>Combined Graphs</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4M8S?OpenDocument"><b>Sales Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4MDQ?OpenDocument"><b>Lost & Stolen Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4MKX?OpenDocument"><b>Branch Operations Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4MPG?OpenDocument"><b>QCC Presidential Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4N5H?OpenDocument"><b>Branch Lines Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4N8B?OpenDocument"><b>Preferred Deposit/Cr.Card Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4NAT?OpenDocument"><b>Preferred HELOC Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4NF6?OpenDocument"><b>Preferred Sales Totals</b></a><br>
</div>
</td>
</tr>
<p>
<td ID="head1" ALIGN="left" width="275" height="15" CLASS="HEADING" ONCLICK="ShowHide(1)"><img name="DIRECT BANKING-MAINANIMATED BALL" src="/intranet/icmimagelib.nsf/vwImages_Lkp/DIRECT+BANKING-MAINANIMATED+BALL/$FILE/Aniball1.gif?OpenElement" border="0"></img>Traditional 80/60</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 1 -->
<div ID="Link1" CLASS="LINKSOFF">
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4NPZ?OpenDocument"><b>Combined Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q7QGQ?OpenDocument"><b>Combined Graphs</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4P5Z?OpenDocument"><b>General C/S Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4P8M?OpenDocument"><b>HDPI Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PBW?OpenDocument"><b>Business Lending Center Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PED?OpenDocument"><b>HELOC/Select Credit Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PHD?OpenDocument"><b>Credit Card Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PKS?OpenDocument"><b>Ed Loans Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PNX?OpenDocument"><b>Internet Banking Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PRC?OpenDocument"><b>Card Activation Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PTB?OpenDocument"><b>Hexagon Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PV9?OpenDocument"><b>Cash Management Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4PZ6?OpenDocument"><b>Spanish Market Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4Q3C?OpenDocument"><b>Asian Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4Q6R?OpenDocument"><b>Sales Totals</b></a><br>
<a CLASS="nav" target="_blank" href="http://us-apps-06.us.hsbc/intranet/dept/icmdirbank.nsf/vwHTMLID/SCON5Q4Q9P?OpenDocument"><b>Emails Totals</b></a><br>
</div>
</td>
</tr>
</table>
<br>
 
</body>

I can not stress enough how much help you have all ready provided!!!!

Thank you!

[Salvatore]

Hello again!

I tested out the function you sent me, and I am unable to open the simple Test tables you created within the DIV ID tags...it looks like it is opening another page instead making the table visible on the same page....

Let me know if I am doing something wrong here....

Thank you.

[Salvatore]

I really need to figure this out...so I am hoping that anyone out there can assist me!!!

The following function will hide all DIV tags...this is my problem:

<script language="JavaScript1.2">
 
function ShowIt(i_Name){
 
var a_Divs = document.all.tags("div")
 
for(i=0;i<a_Divs.length;i++){
    if(a_Divs[i].id != i_Name){
        document.all[a_Divs[i].id].style.display = "none"
    } else {
        document.all[a_Divs[i].id].style.display = "block"
    }
}
 
}
</script>

I need only to hide specific tags....
For example I have DIV ID tags that are associated with a menu script which will fold and unfold the menu like so:

<SCRIPT LANGUAGE="JavaScript">
<!--
function WRITERPUBLISHER()
{
self.status="Updated August 5, 2003"
}
//-->
</SCRIPT>
<style type="text/css">
<!--
#title{font-family:Arial;color:red;font-size:30px}
#subtitle{font-family:Arial;color:black;font-size:22px}
#normal{font-family:Arial;color:black;font-size:14px}
#bold{font-family:Arial;color:black;font-size:14px;font-weight:bold}
#credit{font-family:Arial;color:black;font-size:10px}
-->
</style>
 
<br>
 
 
<style>
<!--
a.nav:link   { font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 10px; text-decoration: none }
a.nav:visited { font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 10px; text-decoration: none }
a.nav:active { font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 10px; text-decoration: none }
a.nav:hover  { font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 10px; text-decoration: none; color: #FF0000 }
.HEADING     { cursor: hand; font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 12px; color: #FFFFFF; 
               background-color: #0000FF; font-weight: none; 
               border: 1 solid #000000 }
.LINKSOFF    { display: none; font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 12px; color: #000080 }
.LINKSON     { display: inline; font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif; font-size: 12px; color: #000080 }
.title {color: black; font-weight: bold; font-size: 24pt; font-family: Arial, helvetica, sans-serif ; text-decoration: none; pt: font-family: Arial, helvetica, sans-serif}
-->
</style>
 
<Script Language="VBscript">
<!--
Option Explicit
DIM menuID,menuObj,cellBk
SUB ShowHide(menuID)
menuObj = "Link" & menuID
cellbk = "Head" & menuID
// CHECK IF OPEN
if document.all.item(menuObj).className = "LINKSON" then    'IF MENU OPEN THEN CLOSE
document.all.item(menuObj).className = "LINKSOFF"
document.all.item(cellBk).style.backgroundColor = "990000"   ' SET CELL BACKGROUND COLOUR BLUE           
ELSE
document.all.item(menuObj).className = "LINKSON"               ' OPEN MENU   
document.all.item(cellBk).style.backgroundColor = "0066cc"  ' SET CELL BACKGROUND COLOUR RED           
END IF
END SUB
-->
</Script>

So can someone please show me how to change the first function so that only specific DIV tags are hidden???

As it is now when I use the first function it will hide the other menu items and I can not get them back!!

I really appreciate any suggestions!